3

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これは、と別のローダーの両方を使用した場合にのみ発生します。

これは PostCSS Loader が原因だと最初は思っていましたが、sass-loading が問題を引き起こし、使用時に scss を変換していないようcss-modulesです。

問題を示すサンプル リポジトリを作成しました: https://github.com/tiemevanveen/sass-css-components-fail-example。

さまざまなブランチを使用してテストできます。

最初と最後のブランチのみがエラーなしで実行されます。

sass-loader が何を返すかを確認するために log-source の例を作成しましたが、sass を変換していないように見えます(ただし、これはローダーの動作を誤解している可能性もあります)。

css モジュールを使用しない他の例は、正しく変換されたコードを示しています。

マスター ブランチ (postcss または別のカスタム ローダーなし) が正常に動作している理由がわかりません。

問題を提出しましたが、これは特定の問題であり、構成の問題である可能性があるため、StackOverflow でより多くの可能性があると考えています。これが私の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'],
  }
};
4

1 に答える 1

5

importLoadersローダーを追加するときは、クエリ パラメータを増やす必要があります。その機能は文書化が不十分で紛らわしいですが、サンプルリポジトリでimportLoaders=2は、Sass と PostCSS の両方が機能します。

于 2016-10-15T07:47:01.883 に答える