webpack配置:
module.exports = {
/* ...... */
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'sass-loader',
options: {
// sassOptions.prependData属性新版本已经没有了 改成options.additionnalData了
additionalData: `@import "~@/styles/common.scss";`,
},
},
]
}
]
}
}
插件要安装sass,sass-loader
配置好后就不用每个文件都引入了,直接用就行
附less的配置(vuecli.config.js):
通过vue添加一个vuecli的插件:
vue add style-resources-loader
按照步骤选中less/sass,安装完毕后会自动在vueconfig.js里生成配置,然后修改一下文件的路径就好
+const path = require('path')
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
+ path.join(__dirname, './src/assets/styles/variables.less'),
+ path.join(__dirname, './src/assets/styles/mixins.less')
]
}
}
}