- A+
所属分类:Web前端
背景:在开发中我们常常需要引入全局的样式文件,来定义一些通用的样式和变量,比如字体,颜色等;而不想使用每次使用@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 }