Storybook不会从node-modules加载CSS

Question

我尝试将我的故事书设置为显示一个Carousel组件。

我使用的是this carousel和样式化组件。

我正在导入外部CSS文件，如下所示：

import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'

这是我非常基本的webpack配置

// storybook/webpack.config.js

const path = require("path");
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: ["css-loader", "sass-loader"],
        include: [
          path.resolve(__dirname, "../src"),
          path.resolve(__dirname, "../node_modules")
        ]
      }
    ]
  },
  resolve: {
    modules: [path.resolve(__dirname, "../src"), "node_modules"],
    extensions: [".js"]
  }
};

这不起作用，而且我无法在我的Carousel上获得任何样式。

我做错什么了吗？

Answer 1

您需要添加style-loader

use: ["style-loader", "css-loader", "sass-loader"]

希望这能解决你的问题。