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

Question

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

我将滑块导入到文件中，然后我得到了一个

css-loader

。我正在使用 webpack。

这是我的滑块：

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 styles from '@shwilliam/react-rubber-slider/dist/styles.css';

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

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 

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

const path = require("path");
const config = {

    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
    },

    resolve: { extensions: [".mjs", ".js", ".jsx", ".css"] },

    module: {
        rules: [
            {
                test: /\.js|jsx|.css$/,
                use: [  "style-loader", "css-loader", "babel-loader"],
                exclude: /node_modules/,
                // loader: "style-loader!css-loader"
            },

        ]
    },

}

module.exports = config;

我做错了什么？

谢谢！

Answer 1

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

Answer 2

也许你在你的index.html中导入了样式表，同时在你的src/index.js中导入了样式表...否则webpack将同时编译它们..

Answer 3

If you see something like this in your index.css folder delete it.


images.jsx;
import email from '../assets/email.png';
import mobile from '../assets/mobile.png';
import api from '../assets/api.png';
import cpp from '../assets/cpp.png';
import css from '../assets/css.png';
import figma from '../assets/figma.png';
import flutter from '../assets/flutter.png';
import git from '../assets/git.png';
import graphql from '../assets/graphql.png';
import html from '../assets/html.png';
import javascript from '../assets/javascript.png';
import mu5 from '../assets/mu5.png';
import node from '../assets/node.png';
import python from '../assets/python.png';
import react from '../assets/react.png';
import redux from '../assets/redux.png';
import sass from '../assets/sass.png';
import typescript from '../assets/typescript.png';
import vue from '../assets/vue.png';

import about01 from '../assets/about01.png';
import about02 from '../assets/about02.png';
import about03 from '../assets/about03.png';
import about04 from '../assets/about04.png';

import profile from '../assets/profile.png';
import circle from '../assets/circle.svg';
import logo from '../assets/logo.png';

import adidas from '../assets/adidas.png';
import amazon from '../assets/amazon.png';
import asus from '../assets/asus.png';
import bolt from '../assets/bolt.png';
import nb from '../assets/nb.png';
import skype from '../assets/skype.png';
import spotify from '../assets/spotify.png';

export default {
    email,
    mobile,
    api,
    cpp,
    css,
    figma,
    flutter,
    git,
    graphql,
    html,
    javascript,
    mu5,
    node,
    python,
    react,
    redux,
    sass,
    typescript,
    vue,
    about01,
    about02,
    about03,
    about04,
    profile,
    circle,
    logo,
    adidas,
    amazon,
    asus,
    bolt,
    nb,
    skype,
    spotify,
};

    index.css
    @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");

this worked for me.

Answer 4

我遇到了同样的问题，我在 npm 中运行了“npx webpack”并且 css 工作了。