1.安裝less
npm i less less-loader -s
2.安裝sass
npm i sass node-sass sass-loader -s
3.配置全局樣式變量
export default defineConfig({
plugins: [ ],
resolve: {},
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "./src/assets/css/globalStyle.scss";`
},
less: {
modifyVars: {
hack: `true; @import "./src/assets/css/styleVariable.less";`,
},
javascriptEnabled: true,
}
}
},
server: {}
})
4.全局樣式文件
//----------------styleVariable.less---------------------
@blue: #00f;
//----------------globalStyle.scss---------------------
$red: #f00;
5.使用
<style lang="less" scoped>
.test{
color: @blue;
}
</style>
<style lang="scss" scoped>
.test{
color: $red;
}
</style>
