如何使用 CSS 文件修复 Storybook Webpack 错误

编程问答 2022-05-12

问题描述

我使用 Storybook 设置了一个设计系统。

我现在遇到的新问题是在我的设计系统中尝试使用 react-responsive-carousel 之后。我正在尝试在 .storybook/preview.js 中导入（全局）CSS 文件：

import '@whitelabel/components/node_modules/react-responsive-carousel/lib/styles/carousel.min.css'

我收到以下错误：

ERROR in ../components/node_modules/react-responsive-carousel/lib/styles/carousel.min.css (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!../components/node_modules/react-responsive-carousel/lib/styles/carousel.min.css)
design-system: Module build Failed (from ./node_modules/postcss-loader/src/index.js):
design-system: SyntaxError
design-system: (1:1) UnkNown word
design-system: > 1 | var api = require("!../../../../../design-system/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");

我的 webpack 配置如下：

config.module.rules.push(
      {
        test: /\.(sa|sc)ss$/,use: [
          'style-loader',{
            loader: 'css-loader',options: {
              modules: {
                localIdentName: "[name]__[local]_[hash:base64:5]",},'sass-loader',],{
        test: /\.css$/,use: ['style-loader','css-loader'],}
);

我只想从导入的包中获取这个 CSS 文件，而不是 CSS“模块化”。它只需要全局导入即可。

任何想法我可能做错了什么导致上述错误？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-modulesglobalglobalreact-css-modulesstorybookwebpackwebpackwebpack