React 故事书 sass-loader 导入 node_modules

Posted 2023-02-22

【中文标题】React 故事书 sass-loader 导入 node_modules

【英文标题】：React storybook sass-loader import node_modules

【发布时间】：2017-03-05 07:07:53

【问题描述】：

我正在使用 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

有人知道为什么会这样吗？

【参考方案1】：

这对我们有用：

    /* 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
                
            ]
        
    ;