当我们直接在入口文件中引入资源文件发现,在其他scss文件中无法直接使用,还需要单独去引入一次;
为什么需要这样配置而不能在入口文件中直接引入呢?
这是因为 SCSS 的变量、函数或者混合器等内容是在编译阶段被解析的,而不是在运行时。因此,如果你想要在样式文件中使用这些内容,就需要在编译阶段将这些内容注入到每个样式文件中。
而在入口文件中引入 SCSS 文件只是将这些样式文件导入到项目中,而并不会在编译阶段将 SCSS 文件中的内容注入到每个样式文件中。
因此,如果你想要在每个样式文件中直接使用 SCSS 文件中定义的变量、函数或者混合器,就需要通过 Vite 配置项 或者webpack配置项来实现。
vite
javascript
css: {
//全局配置utils.scss
preprocessorOptions: {
scss: {
additionalData: `@import "@/assets/style/centn/modules/util.scss";`,
},
},
}
webpack
javascript
{
test: /\.(css|scss|sass)$/,
use: [
!prodMode
? 'style-loader'
: {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
'css-loader',
'postcss-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
'src/style/var.scss'
]
}
}
]
}
或者像vue-cli中
javascript
css: {
loaderOptions: {
scss: {
prependData: `@import "@/style/var.scss";`
},
}
}