vue3 的命令。
vue add style-resources-loader
不知道为什么我用这个命令没有反应。
所以还是用的npm。
npm i style-resources-loader
npm i vue-cli-plugin-style-resources-loader
使用npm的话要安装两个,最后在vue.config.js文件中配置。
const { defineConfig } = require('@vue/cli-service')
const path = require('path')
module.exports = defineConfig({
transpileDependencies: true,
// 配置:style-resources-loader
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
// 需要使用path.join来拼接完整的路径,需要文件的绝对路径
patterns: [
path.join(__dirname, './src/assets/style/mixins.less'),
path.join(__dirname, './src/assets/style/variables.less')
]
}
}
})
less文件放在src/assets/style下面的variables.less。
// variables.less
// less 变量
//主题
@xtxColor: #27BA9B;
//辅助
@helpColor: #E26237;
//成功
@sucColor: #1DC779;
//警告
@warnColor: #FFB302;
//价格
@priceColor: #CF4444;
然后就可以直接在页面中使用了,不需要通过页面引用了。
<style scoped lang="less">
@import "../../assets/style/variables.less";
.container {
color: @xtxColor;
}
</style>
<template>
<div class="container">HomePage</div>
</template>
<script>
export default {
name: 'HomePage'
}
</script>
<style scoped lang="less">
.container {
color: @xtxColor;
}
</style>
然后重新运行一下项目就OK了!
npm run serve 或者 npm run dev