配置Sass
1瓜富、創(chuàng)建variable.scss文件
$theme-color: #ff00ff;
2降盹、配置vue.config.js中的cssloader
module.exports = {
// ...
css: {
loaderOptions: {
sass: {
data: `
@import "@/assets/styles/variable.scss";
`
}
}
}
}
3、在.vue中使用
經(jīng)過(guò)上面的配置价捧，就可以直接在某個(gè).vue文件中的style中使用變量了涡戳，而不需要每次都import這個(gè)變量文件
配置Less
1、創(chuàng)建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中使用
經(jīng)過(guò)上面的配置，就可以直接在某個(gè).vue文件中的style中使用變量了内贮，而不需要每次都import這個(gè)變量文件
