Question

我有这个sass目录：

- _vars.scss
- main.scss

// vars.scss

$base-container: 1400px;

// main.scss

@import './vars';

在其他js文件中我有：

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

//一些模块-SASS-file.scss

.container {
  width: $base-container;
}

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

undefined variable $base-container

Answer 1

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

如果您不想在每个Sass文件中键入import，可以查看baggage-loader，它会自动为您添加。{/ p>

Answer 2

不使用sass-resources-loader ：

感谢didReceiveMemoryWarning帮助我得到这个答案，并结合这个帖子： this blog post

在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 3

简答：

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;
}

您需要做的只是

安装sass-resources-loader： npm install sass-resources-loader --save-dev
并配置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中使用，而不需要它。

Answer 4

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

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

如果您这样做，您的常规sass或scss文件将被添加

Answer 5

Webpack 4解决方案：

{
    loader: 'sass-loader', options: {
        sourceMap: true,
        prependData: '@import "pathto/vars";'
    },
}

要使@import "pathto/vars";工作，您需要Webpack进行配置以解决此类导入。因此，它只是为行添加了前缀。

此解决方案很好，因为您没有像使用sass-resources-loader那样的源地图问题

Answer 6

您可以使用 text-transform-loader 包。

{
  test: /\.scss$/,
  use: [
      'style-loader',
      'css-loader',
      'sass-loader', 
      {
        loader: 'text-transform-loader',
        options: {
          prependText: `@import "${path.resolve(__dirname, './base.scss')}";`,
        }
      }
    ]
  }

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

6 个答案:

简答：

答案很长：

您需要做的只是

以下是github