配置Sass
1、创建variable.scss文件
$theme-color: #ff00ff;
2、配置vue.config.js中的cssloader
module.exports = {
// ...
css: {
loaderOptions: {
sass: {
data: `
@import "@/assets/styles/variable.scss";
`
}
}
}
}
3、在.vue中使用
经过上面的配置，就可以直接在某个.vue文件中的style中使用变量了，而不需要每次都import这个变量文件
配置Less
1、创建variable.less文件
@theme-color: #ff00ff;
2、Less需要下载style-resources-loader
npm i style-resources-loader -D
3、配置vue.config.js
const path = require('path');
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname, '@/assets/styles/variable.less'),
],
},
},
};
4、在.vue中使用
经过上面的配置，就可以直接在某个.vue文件中的style中使用变量了，而不需要每次都import这个变量文件
