vue项目中sass全局引用变量 sass-resources-loader webpack配置
赞
踩
sass-resources-loader
https://www.npmjs.com/package/sass-resources-loader解析：（下面是强行翻译的。可以大概看一下什么意思。原文可以点击上面的链接看英文原版）
sass 资源加载器
这个加载器会将你的 SASS 资源加载到每个requiredSASS 模块中。因此，您可以在所有 SASS 样式中使用共享变量、mixin 和函数，而无需在每个文件中手动加载它们。
- 与 CSS 模块一起工作！
- 这个加载器不限于 Sass 资源。它应该适用于每期 31 的less、post-css 等。
- 支持Webpack 4
- 支持 Sass
@use语法。您必须使用 Dart Sass（sass而不是node-sassnpm 包）。查看hoistUseStatements选项。
安装
通过 npm 获取：
npm install sass-resources-loader
用法
使用资源创建您的文件（或多个文件），这些资源是您希望在 CSS 模块 Sass 等地方可用的 Sass 片段：
/*资源.scss */
$截面宽度：700像素；
@mixin section-mixin {
边距：0 自动；
宽度：$截面宽度；
}
选项
| 名称 | 类型 | 默认 | 描述 |
|---|---|---|---|
resources | {String|String[]} | undefined | 包含在文件中的资源 |
hoistUseStatements | {Boolean} | false | 如果为真，入口文件@use导入将被提升。这意味着@use 语句将超越资源的包含。 |
选项示例
resources
指定资源，这些内容将被添加到每个文件中。
如果文件example/a.scss的内容为$my-variable: #fff，我们可以这样做
{
加载器：'sass-resources-loader' ，
选项：{
资源：'example/a.scss'
}
}
这将输出以下内容：
//入口文件
$我的变量：#fff；
//入口文件的内容放在这里
hoistUseStatements
告诉编译器如果在入口文件中找到现有@use语句，则应将其提升到顶部。原因是根据docs@use必须在大多数其他声明之前，除了变量声明。
如果我们的入口文件有以下内容
//入口文件
@use ' my/definitions/file ' ;
@use '我的/其他/定义/文件' ;
//入口文件的内容放在这里
我们的资源文件包含这个
$我的变量：#fff；
@mixin some-mixin {
颜色: #000 ;
}
然后将 liftUseStatements 设置为 true 的输出将如下所示。请注意，@use以上陈述均包含资源。
//入口文件
@use ' my/definitions/file ' ;
@use '我的/其他/定义/文件' ;
//资源
$my-variable : #fff ;
@mixin some-mixin {
颜色: #000 ;
}
//入口文件的其余内容放在这里
您还可以使用这种多行语法：
@use ' config ' with (
$text-color : #FAFAFA
);
有关示例，请参见./test/scss/hoist-multiline.scss。
如Sass @use 的文档中所述，如果您的“资源”仅包含变量定义，则无需提升。
如果您收到错误消息：
SassError: @use rules must be written before any other rules.
那么您需要使用该hoistUseStatements: true选项。
尖端
- 不要包含任何将在 CSS 中实际呈现的内容，因为它将添加到每个导入的 Sass 文件中。
- 避免在资源文件中使用 Sass 导入规则，因为它会减慢增量构建。
sassResources而是直接在 webpack 配置的数组中添加导入的文件。如果您担心资源索引的位置，您可能需要查看此评论中概述的解决方案。 - 如果您仍想使用 Sass 导入规则，请确保您的路径相对于它们在其中定义的文件（基本上，您的文件与资源），除了那些以
~(~被解析到node_modules文件夹) 开头的文件。
在 webpack 配置中应用加载器（支持v1.x.x& v2.x.x）并提供包含资源的文件的路径：
/* Webpack@2: webpack.config.js */
模块：{
规则：[
//应用加载程序
{
测试：/ \。scss $ / ,
use : [
'style-loader' ,
'css-loader' ,
'postcss-loader' ,
'sass-loader' ,
{
loader : 'sass-resources-loader' ,
options : {
// 提供路径具有资源
资源的文件：'./path/to/resources.scss' ，
// 或路径
资源数组：[
'./path/to/vars.scss' ,
'./path/to/mixins.scss' ,
'./path/to/functions.scss'
]
} ,
} ,
] ,
} ,
] ,
} ,
/* Webpack@1: webpack.config.js */
模块：{
加载器：[
//应用加载器
{ 测试：/ \。scss $ / , 加载器: 'style!css!sass!sass-resources' } ,
] ,
} ,
// 提供资源文件的路径
sassResources : './path/to/resources.scss' ,
// 或路径数组
sassResources : [ './path/to/vars.scss' , './path/to/mixins.scss' ] ,
注意：如果
webpackConfig.context未定义，process.cwd()将用于解析具有资源的文件。
现在您可以使用这些资源而无需手动加载它们：
/*组件.scss */
.section {
@include section-mixin ; // <--- `section-mixin` 在这里定义
}
从“反应”导入反应 ；从'./component.scss'导入css ；
// ...
渲染( ) {
return (
< div className = { css.section } / > ) ; _ _ }
全局模式匹配
您可以指定 glob 模式以匹配同一目录中的所有文件。
// 指定单个路径
resources: './path/to/resources/**/*.scss' , // 将匹配文件夹和子目录中的所有文件
// 或路径数组
resources : [ './path/ to/resources/**/*.scss' , './path/to/another/**/*.scss' ]
请注意，这sass-resources-loader将按顺序解析您的文件。如果你希望你的变量可以在你所有的 mixin 中被访问，你应该首先指定它们。
资源：[ './path/to/variables/vars.scss' , './path/to/mixins/**/*.scss' ]
示例和相关库
Vue 的 Webpack 4 配置示例
- module: {
- rules: [
- {
- test: /\.vue$/,
- use: 'vue-loader'
- },
- {
- test: /\.css$/,
- use: [
- { loader: 'vue-style-loader' },
- { loader: 'css-loader', options: { sourceMap: true } },
- ]
- },
- {
- test: /\.scss$/,
- use: [
- { loader: 'vue-style-loader' },
- { loader: 'css-loader', options: { sourceMap: true } },
- { loader: 'sass-loader', options: { sourceMap: true } },
- { loader: 'sass-resources-loader',
- options: {
- sourceMap: true,
- resources: [
- resolveFromRootDir('src/styles/variables.scss'),
- ]
- }
- }
- ]
- }
- ]
- }
VueJS webpack 模板(vue-cli@2)
如果你想在VueJS Webpack 模板中使用这个加载器，你需要在build/utils.js第 42 行之后添加以下代码：
if ( loader === 'sass' ) {
loaders . 推（{
加载器：'sass-resources-loader' ，
选项：{
资源：'path/to/your/file.scss' ，
} ，
} ）；
}
VueJS webpack 模板(vue-cli@3)
如果你使用 vue-cli@3，你需要vue.config.js在你的项目根目录中创建一个文件（在 package.json 旁边）。然后，添加以下代码：
// vue.config.js
模块。出口 = {
chainWebpack : config => {
const oneOfsMap = config . 模块。规则（'scss' ）。一个人。存储
oneOfsMap 。forEach ( item => {
item
. use ( 'sass-resources-loader' )
. loader ( 'sass-resources-loader' )
. options ( {
// 提供资源文件的路径
resources : './path/to/resources.scss' ,
// 或路径
资源数组：[ './path/to/vars.scss' , './path/to/mixins.scss' , './path/to/functions.scss' ]
} )
. 结束( )
} )
}
}
其他资料：
