欢迎光临
我的个人博客网站

vue cli3.0及以上,全局less文件引入

背景:在开发中我们常常需要引入全局的样式文件,来定义一些通用的样式和变量,比如字体,颜色等;而不想使用每次使用@import。

步骤:

1、vue cli3.0以上需要新建vue.config.js文件

2、安装dev依赖”style-resources-loader”

3、在”/src/assets/css/”路径下添加自定义less文件,在vue.config.js粘贴以下内容

 1 const path = require("path");  2   3 module.exports = {  4   chainWebpack: (config) => {  5     const types = ["vue-modules", "vue", "normal-modules", "normal"];  6     types.forEach((type) =>  7       addStyleResource(config.module.rule("less").oneOf(type))  8     );  9   }, 10 }; 11  12 function addStyleResource(rule) { 13   rule 14     .use("style-resource") 15     .loader("style-resources-loader") 16     .options({ 17       patterns: [path.resolve(__dirname, "./src/assets/css/common.less")], 18     }); 19 }

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » vue cli3.0及以上,全局less文件引入
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏