1.vue3.0创建项目,在项目根目录下创建vue.config.js
2.配置vue.config.js 以scss为例
const path = require('path');
module.exports = {
chainWebpack: (config) => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
},
}
// 全局导入样式
function addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/presentation/style/basic.scss'),
],
})
}
3.cnpm install style-resources-loader -D 安装插件
4:就可以全局使用basic.scss中的变量了,而不用每次引入