Reactjs 使用Storybook导入scss文件

我现在面临着一个关于故事书的问题。在我的应用程序中，通过webpack，一切都很好。故事书似乎与我的配置有问题

这是我的webpack.config.js：

module.exports = {
   entry: './index.js',
   output: {
   path: path.join(__dirname, 'dist'),
   filename: 'bundle.js'
},
module: {
   loaders: [
   {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      include: __dirname
   },
   {
      test: /\.scss$/,
         use: [
         {loader: "style-loader"}, 
         {loader: "css-loader"},
         {loader: "sass-loader",
          options: {
            includePaths: [__dirname]
    }
  }]
},

Storybook在解析scss文件时遇到问题，是否需要为Storybook创建特定的webpack.config.js来解决此问题

---

在我的主应用程序中，我通过以下方式导入我的scss文件：

import./styles/base.scss'

它只需添加一个与我现有的非常类似的webpack.config.js即可工作：

const path = require('path')

module.exports = {
    module: {
     rules: [
     {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../')
     },
     {  test: /\.css$/,
        loader: 'style-loader!css-loader',
        include: __dirname
     },
     {
        test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: 'fonts/[hash].[ext]',
            limit: 5000,
            mimetype: 'application/font-woff'
          }
         }
     },
     {
       test: /\.(ttf|eot|svg|png)$/,
       use: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[hash].[ext]'
          }
       }
     }
   ]
 }
}

---

对于在Create React应用程序上运行storybook的用户，将

MiniCssExtractPlugin

添加到

。storybook/webpack.config.jon

解决了我加载sass文件的问题：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = function({ config }) {
  config.module.rules.push({
    test: /\.scss$/,
    loaders: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../')
  });

  config.plugins.push(new MiniCssExtractPlugin({ filename: '[name].css' }))

  return config;
};

在故事书6中有一个简单的

min.js代码，对我来说很好！

const path=require（'path'）；
//导出一个函数。接受基本配置作为唯一参数。
module.exports={
故事：[……]，
加载项：[……]，
webpackFinal:async（配置，{configType}）=>{
//`configType`的值为'DEVELOPMENT'或'PRODUCTION'
//您可以在此基础上更改配置。
//“PRODUCTION”用于构建故事书的静态版本。
//进行您需要的任何细粒度更改
config.module.rules.push({
测试：/\.scss$/,，
用法：['style-loader'，'css-loader？url=false'，'sass-loader']，
包括：path.resolve（_dirname，“../”），
});
//返回修改后的配置
返回配置；
},
};需要更多信息来回答您的问题，例如您如何将scss文件导入应用程序。谢谢您通知我。我将完成我的问题。关于您的用例的文档有一节非常感谢，我将尝试按照文档步骤解决它。哇，我花了数小时寻找sass解决方案，这是唯一对我有效的解决方案。我在React上运行盖茨比。如果你运行故事书，这是可行的，但在构建上失败了-