背景: Vue项目每个组件都@import 一些scss的方法或者变量,特别是rem函数,是很不方便的,也不方便统一,所以,能不能全局引入这个文件呐,是可以的
方法:
{
test: /\.(c|sa|sc)ss$/, // 它会应用到普通的 `.css|.sass|.sacc` 文件,以及 `.vue` 文件中的 `<style>` 块
use: [
process.env.NODE_ENV !== 'production' ? 'vue-style-loader' : MiniCssExtractPlugin.loader, // 请只在生产环境下使用 CSS 提取,这将便于你在开发环境下进行热重载
'css-loader',
'postcss-loader',
// 'sass-loader' 下面就是这一次的关键
{
loader: 'sass-loader',
options: {
data: `
@import "src/commons/styles/rem.scss";
@import "src/commons/styles/var.scss";
@import "src/commons/styles/mixins.scss";
`
}
}
]
},