webpack - Storybook 不会从节点模块加载 CSS

Question

我正在尝试设置我的故事书以显示 Carousel 组件。

我正在使用这个 carousel以及 styled-components。

我正在导入我的外部 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 上获得任何样式。

我做错什么了吗 ？

标签： webpackstorybook

Answer 1

您需要添加style-loader：

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

希望这能解决您的问题。