在css样式文件夹中新增 global.less 作为全局样式,在 main.js 中通过 import 导入,可正常使用样式,但 global.less 中定义的样式属性还不能全局使用,需通过以下方法配置。
1、安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader 两个插件
npm i style-resources-loader vue-cli-plugin-style-resources-loader -D
2、在 vue.config.js 中进行配置
使用 global.less
const path = require('path')
module.exports = {
devServer: {
open: true
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname, './src/assets/css/global.less')
]
}
}
}
或者使用 global.scss
```javascript
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import '@/assets/css/global.scss';`
}
}
}
}