将 sass-loader 与 css-modules 组合时出错

Question

我在使用 SASS 的 map-get 时遇到以下错误。

ERROR in ./src/special.scss
Module build failed: ModuleBuildError: Module build failed: Unknown word (11:14)

   9 |
  10 | @mixin mediaquery($name) {
> 11 |     @media #{map-get($breakpoints, $name)} {
     |              ^
  12 |         @content;
  13 |     }
  14 | }

只有当我同时使用 sass-loader 和另一个加载程序时才会发生这种情况。

我 first thought 这是由 PostCSS 加载程序引起的，但似乎是 sass-加载导致问题而不是转换 scss 当使用 css-modules.

我创建了一个示例存储库来说明问题：https://github.com/tiemevanveen/sass-css-components-fail-example。

您可以使用不同的分支进行测试：

master: CSS 模块 + SASS
postcss CSS 模块 + SASS + PostCSS
log-source：使用 CSS 个模块 + SASS + Custom source logging module
no-css-modules: SASS + Custom source logging module

只有第一个和最后一个分支运行没有错误。

我创建了日志源示例以查看 sass-loader 返回的内容和 it looks like it's not transforming the sass（但这也可能是我误解了 loader 的工作方式）。

没有 css 模块的另一个示例执行 show the right transformed 代码..

我很困惑为什么 master 分支（没有 postcss 或其他自定义加载器）工作正常......如果 sass-loader 出现问题那那个应该也失败了吧？

我已提交 an issue，但我认为这在 Whosebug 上有更多机会，因为它是一个非常具体的问题，可能更像是一个配置问题。这是我的 webpack 配置：

const webpack = require('webpack');
const path = require('path');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');

module.exports = {
  devtool: 'source-source-map',
  debug: true,
  context: path.resolve(__dirname, './src'),
  entry: {
    app: './index.js'
  },
  output: {
    path: path.resolve(__dirname, './static'),
    filename: '[name].js',
    publicPath: '/static/'
  },
  devServer: {
    outputPath: path.resolve(__dirname, './static'),
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new ExtractTextPlugin('[name].css'),
    new WriteFilePlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader', [
          'css?modules&importLoaders=1&localIdentName=[path]_[name]_[local]',
          // 'postcss-loader',
          'sass'
        ])
      },
      // + js loader
    ]
  },
  postcss: [
    autoprefixer({ browsers: ['> 0.5%'] })
  ],
  resolveLoader: {
    fallback: [
      path.resolve(__dirname, 'loaders'),
      path.join(process.cwd(), 'node_modules')
    ]
  },
  resolve: {
    extensions: ['', '.js', '.json'],
  }
};

Answer 1

您需要在添加加载程序时增加 importLoaders 查询参数。该功能的文档很少且令人困惑，但在您的样本回购中，importLoaders=2 与 Sass 和 PostCSS 都有效。

将 sass-loader 与 css-modules 组合时出错

Error when combining sass-loader with css-modules

sass

webpack

css-modules