Блог

Я использую sass-loader для загрузки моих scss-файлов внутри моего проекта, а также использую преобразователь node_modules, например: @import '~styleguide/src/vars.scss'

Когда я пытаюсь загрузить react-storybook, я передаю это в webpack.config.js

 const path = require('path');
const autoprefixer = require('autoprefixer');

// load the default config generator.
var genDefaultConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js');

module.exports = function(config, env) {
  var config = genDefaultConfig(config, env);

  config.module.loaders.push({
    test: /.html$/, loader: 'raw'
  });
  config.module.loaders.push({
    test: /.scss$/,
    loaders: ['style', 'css?sourceMap', 'postcss-loader', 'sass?config=sassLoader']
  });

  config.sassLoader = {
    includePaths: [
      path.resolve(__dirname, '..', 'src/scss')
    ],
    sourceMap: true
  }

  config.postcss = function() {
    return [autoprefixer];
  }

 return config;
};
  

Из того, что я могу прочитать из sass-loader разрешение node_module должно быть автоматическим, но, похоже, оно не работает:

вот сообщение об ошибке

 ERROR in ./~/css-loader?sourceMap!./~/postcss-loader!./~/sass-loader?config=sassLoader!./src/component.scss
Module build failed:
@import '~styleguide/src/vars';
^
      File to import not found or unreadable: ~styleguide/src/vars
Parent style sheet: stdin
  

У кого-нибудь есть идея, почему это происходит?

У нас это работает:

     /* eslint-env node */
    const path = require('path');

    const include = path.resolve(__dirname, '..', 'src');

    module.exports = {
        module: {
            rules: [
                {
                    test: /.scss$/,
                    loaders: ["style-loader", "css-loader", "sass-loader"],
                    include
                }
            ]
        }
    };