vue vue-cli3中使用全局less文件
全局less文件直接在main.js里面导入是没有效果的,刚开始在网上找了很多方法都是在 build / utils 文件里面改,但是vue-cli 3.x构建的项目里没有这个文件夹。。但其实在官网里也有解决方法的vue-cli3.x 导入全局.less文件进入项目,安装 style-resources-loadernpm i style-resources-loader -S在...
·
全局less文件直接在main.js里面导入是没有效果的,刚开始在网上找了很多方法都是在 build / utils 文件里面改,但是vue-cli 3.x构建的项目里没有这个文件夹。。
但其实在官网里也有解决方法的
vue-cli3.x 导入全局.less文件
- 进入项目,安装 style-resources-loader
npm i style-resources-loader -S
- 在 vue.config.js 文件里面添加以下代码,如果没有此文件则自己在根目录新建一个(与package.json 同级)
const path = require('path')
module.exports = {
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
},
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
}
function addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
// 需要全局导入的less路径,自己修改,我这里引入了两个less文件
path.resolve(__dirname, './src/assets/css/global.less'),
path.resolve(__dirname, './src/assets/css/variables.less')
],
})
}
- 完成,修改后需要重新 run 一下项目才能起效果
- 具体更多信息,可以去查看Cli官方文档,在Vue Cli \ 开发 \ CSS相关 \ 预处理器 \ 自动化导入 -> 传送门
更多推荐
已为社区贡献3条内容
所有评论(0)