模块构建失败（来自 ./node_modules/css-loader/dist/cjs.js）：CssSyntaxError

Question

我正在构建一个反应应用程序。

我将滑块导入到文件中，然后得到了一个css-loader. 我正在使用网络包。

这是我的滑块：

import React, {useState} from 'react';
import RubberSlider from '@shwilliam/react-rubber-slider';
import styles from '@shwilliam/react-rubber-slider/dist/styles.css';

export const Slider = () => {
  const [value, setValue] = useState(0.5)

  return <RubberSlider width={250} value={value} onChange={setValue} />
}

这个 ^ 将进入另一个组件并被调用。

当我评论出来时一切都很好

import React, {useState} from 'react';
import RubberSlider from '@shwilliam/react-rubber-slider';
import styles from '@shwilliam/react-rubber-slider/dist/styles.css';

export const Slider = () => {
  const [value, setValue] = useState(0.5)

  return <RubberSlider width={250} value={value} onChange={setValue} />
}

但我需要这些样式的滑块，当我运行 Webpack 命令时，出现此错误：

import styles from '@shwilliam/react-rubber-slider/dist/styles.css';

这是我的 webpack.config.js 文件：

src/index.js (./node_modules/css-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./src/index.js)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) /Users/eddy/Projects/Sorting-Visualizer/src/index.js Unknown word

> 1 | import React from 'react';
    | ^
  2 | import ReactDOM from "react-dom";
  3 | import 

我究竟做错了什么？

谢谢你！

Answer 1

出现此错误的根本原因是 css 文件被 css 加载器多次编译时。检查您的 webpack 配置是否有重复的 css 加载器条目。 从 webpack.config.js 中删除 [ "style-loader", "css-loader" ] 并尝试 npx webpack 这可能是因为 css loader 在您的应用程序中间接执行。