使用 Webpack 解析 SCSS 全局变量

Question

我无法解析我的 scss 全局变量文件。我正在尝试添加一个 scss 颜色文件，我可以在需要的地方简单地全局导入它。

Webpack 1 配置：

  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: 'style' +
        '!css' +
          '?sourceMap' +
          '&modules' +
          '&importLoaders=1' +
          '&localIdentName=[local]__[hash:base64:4]' +
        '!sass' +
          '?sourceMap'
      }
    ]
  },
  sassLoader: {
    includePaths: [
        path.resolve(__dirname, '../src/<path to stylesheets>/themes')
      ]
  },

Sass 文件

@import "colors";

.add {
  background: $button-inactive-state;
}

错误代码（编辑了一些个人物品）

./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[local]__[hash:base64:4]!./~/sass-loader/lib/loader.js?sourceMap!./src/<path to file>/toggle-item-button/item-icon.scss
Module build failed: 
@import "colors";
^
      File to import not found or unreadable: colors
Parent style sheet: stdin
      in /Users/<me>/Checkouts/<my project>/src/<path to file>/toggle-item-button/item-icon.scss (line 1, column 1)
Error: 
@import "colors";
^
      File to import not found or unreadable: colors
Parent style sheet: stdin
      in /Users/<me>/Checkouts/<my project>/src/<path to file>/toggle-item-button/item-icon.scss (line 1, column 1)
  at options.error (/Users/<me>/Checkouts/<my project>/node_modules/node-sass/lib/index.js:286:26)

 @ ./src/<path to file>/toggle-item-button/item-icon.scss 4:14-229

Answer 1

我找到了可行的解决方案：

Webpack 配置：

  resolve: {
    alias: {
      themes: path.resolve(__dirname, '../src/<path to stylesheets>/themes')
    },
  },

SCSS

@import "~themes/colors";

使用 Webpack 解析 SCSS 全局变量

Resolving SCSS global variables with Webpack

webpack

global-variables

css-modules

sass-loader