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全局变量

1 个答案: