Блог

Я получаю следующую ошибку при использовании 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, но похоже, что проблемы вызывает загрузка sass, а не преобразование scss при использовании css-modules .

Я создал образец репозитория, иллюстрирующий проблему: https://github.com/tiemevanveen/sass-css-components-fail-example .

Вы можете использовать разные ветки для тестирования:

• master : Модули CSS SASS
• postcss Модули CSS SASS PostCSS
• log-source : Использует модули CSS SASS Пользовательский модуль ведения журнала
• no-css-modules : SASS Пользовательский модуль ведения журнала

Только первая и последняя ветви выполняются без ошибок.

Я создал пример с исходным кодом журнала, чтобы посмотреть, что возвращает sass-loader, и похоже, что он не преобразует sass (но это также может быть из-за того, что я неправильно истолковываю, как работают загрузчики).

Другой пример без модулей css показывает правильно преобразованный код..

Я озадачен, почему основная ветка (без postcss или другого пользовательского загрузчика) работает нормально.. если что-то не так с sass-loader, то это тоже должно выйти из строя, верно?

Я зарегистрировал проблему, но я думаю, что у этого больше шансов на 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?modulesamp;importLoaders=1amp;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 запроса по мере добавления загрузчиков. Эта функция плохо документирована и сбивает с толку, но в вашем репозитории samples importLoaders=2 работает как с Sass, так и с PostCSS.