Webpack sass 加載器無法識別全局變量文件

Question

我有這個 sass 目錄：

- _vars.scss
- main.scss

//變量.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

不使用 sass-resources-loader ：

感謝@Arseniy-II幫助我得到這個答案，結合這個線程： https : //github.com/webpack-contrib/sass-loader/issues/218

在你的 webpack 模塊規則中使用 loader 選項，你可以為 sass-loader 分配一個 data 屬性，然后你應該能夠按預期使用所有 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 2

您必須將vars文件導入到使用這些變量的每個 Sass 部分中，因為每個部分都是自己編譯的； 除非您專門導入它們，否則所有文件都不會“了解”其他文件。

如果您不想在每個 Sass 文件中都import ，您可以查看Baggage-loader ，它會自動為您添加它們。

Answer 3

簡短回答： Sass 資源加載器

長答案：

sass-resources-loader 允許在每個需要的 sass 文件中使用變量、mixin 等。

所以你可以在 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在你的__dirname是可用的，不需要它。

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那樣使用 sourcemaps 的問題

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')}";`,
        }
      }
    ]
  }