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

南北极之间

2024-06-28 帮助2人

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

其他资料：

这篇好文章是转载于：学新通技术网

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

sass-resources-loader

sass 资源加载器

安装

用法

选项

选项示例

尖端

全局模式匹配

示例和相关库

Vue 的 Webpack 4 配置示例

VueJS webpack 模板(vue-cli@2)

VueJS webpack 模板(vue-cli@3)

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

《学习通》视频自动暂停处理方法

TikTok加速器哪个好免费的TK加速器推荐

Android 11 保存文件到外部存储，并分享文件

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

微信运动停用后别人还能看到步数吗

excel打印预览压线压字怎么办