Webpack sass loader无法识别全局变量文件

Question

我有这个sass目录:

- _vars.scss
- main.scss

//vars.scss

$base-container: 1400px;

//main.scss

@import './vars';

在其他js文件中我有:

require('./some-module-sass-file');

//some-module-sass-file.scss

.container {
  width: $base-container;
}

问题是我在vars文件中有全局变量,而some-module-sass-file无法识别它们并抛出错误:

undefined variable $base-container

Answer 1

如果您有 Webpack 5，则必须使用extraData，其他选项现在无效：

  {
      loader: 'sass-loader',
      options: {
        additionalData: '@import path/to/general.sass',
      }
  },

如果您这样做，您的通用 sass 或 scss 文件将被添加到前面

Answer 2

您必须将vars文件导入到使用这些变量的每个Sass部分中,因为每个部分都是自己编译的; 除非您专门导入,否则所有文件都不会"了解"其他文件.

如果您不想import在每个Sass文件中键入s,您可以查看行李装载器,它会自动为您添加它们.

Answer 3

不使用sass-resources-loader：

感谢@ Arseniy-II与以下线程一起帮助我获得此答案：https : //github.com/webpack-contrib/sass-loader/issues/218

使用webpack模块规则中的loader选项，可以将数据属性分配给sass-loader，然后应该能够按预期使用所有sass函数：

module: {
  rules: [
    // Apply loader
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            data: '@import "path/to/global.scss";',
            includePaths:[__dirname, 'src']
          },
        },
      ],
    },
  ],
}

Answer 4

简短答案：

https://github.com/shakacode/sass-resources-loader

长答案：

sass-resources-loader允许在每个必需的sass文件中使用变量，mixins等。

因此，您可以在vars.scss中使用变量：

$main: #073288; 
$secondary: #F6A906;

然后照常使用它们：

.my-component {
    background-color: $main;
    color: $secondary;
}

您需要做的就是

1. 安装sass-resources-loader： npm install sass-resources-loader --save-dev

2. 并配置您webpack.config：

{
    loader: 'sass-resources-loader',
    options: {
        resources: './path/to/vars.scss'
    }
}

这是来自github的例子

module: {
  rules: [
    // Apply loader
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: ['./path/to/vars.scss', './path/to/mixins.scss']
          },
        },
      ],
    },
  ],
}

如果您对资源的路径有疑问，请尝试使用如下路径：

• const path = require('path')
• resources: [path.resolve(__dirname, './../vars.scss')]
• __dirname 在webpack.config内部可用，而不需要它。