vue项目中sass全局引用变量 sass-resources-loader webpack配置

sass-resources-loader

sass-resources-loader - npmSASS resources loader for Webpackhttps://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'  ]

示例和相关库

• react-webpack-rails-tutorial ， www.reactrails.com上的实时示例。
• 引导加载程序

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' ] 
        } ) 
        . 结束( ) 
    } ) 
  } 
}

其他资料：

sass变量使用 vue中全局引用sass变量 sass-resources-loader webpack配置_负数-CSDN博客_sass-resources-loader温故而知新SASS允许一个选择器，继承另一个选择器。@extend　.class1 {　　　　border: 1px solid #ddd;　　}class2要继承class1，就要使用@extend命令：.class2 {　　　　@extend .class1;　　　　font-size:120%;　　}mixin@mixin left {　　　　float: left;　　　　margin-left: 10px;　　}使用@include命令，调用https://blog.csdn.net/qq_43201542/article/details/108761190?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164264738916780261989984%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=164264738916780261989984&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-108761190.pc_search_result_control_group&utm_term=sass-resources-loader&spm=1018.2226.3001.4187