使用vue-cli的style-resoures-loader插件来完成自动注入到每个vue组件中style标签中
1、在当前项目下执行一下命令vue add style-resources-loader
,添加一个vue-cli的插件
它会提示你使用哪种css预处理器,我使用的是指Less
vue add style-resources-loader
2、安装完毕后会在vue.config.js
中自动添加配置
const path = require('path')
module.exports = defineConfig({
// ...
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.join(__dirname, './src/styles/variables.less') //你要引入的less
]
}
}
})
3、重启服务即可