将sass加载程序与css模块组合时出错

将sass加载程序与css模块组合时出错,sass,webpack,css-modules,Sass,Webpack,Css Modules,使用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)} { |

使用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加载程序
和另一个加载程序时,才会发生这种情况

我认为这是由postss加载程序引起的,但似乎是sass加载导致了问题,并且在使用
css模块时没有转换scs

我已经创建了一个示例回购协议来说明问题:

您可以使用不同的分支来测试:

  • master
    :CSS模块+SASS
  • postss
    CSS模块+SASS+postss
  • 日志源代码
    :使用CSS模块+SASS+
  • 无css模块
    :SASS+
只有第一个和最后一个分支运行时没有错误

我创建了日志源示例,以查看sass加载程序返回的是什么,以及(但这也可能是我对加载程序工作方式的误解)

另一个没有css模块的示例没有代码

我很纳闷为什么主分支(没有POSTSS或其他自定义加载程序)工作得很好。。如果sass加载程序出现问题,那么该加载程序也应该失败,对吗

我已经提交了文件,但我认为这在StackOverflow上有更多的机会,因为这是一个如此特殊的问题,可能更像是一个配置问题。这是我的网页配置:

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

添加加载器时,需要增加
importLoaders
query参数。该功能的文档记录得很差,令人费解,但在您的示例repo中,
importLoaders=2
与Sass和postss一起工作。

是的,这很有效!!非常感谢!在这里找到的。。