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

Question

我正在构建一个反应应用程序，我在一个文件中导入了一个 slider

然后我得到了一个 css-loader，我也在使用 webpack

这是我的 slider -

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} />
}

这个 ^ 将 go 在另一个组件中并被调用

但是当我发表评论时一切都很好 -

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

但是我需要这些 styles 用于 slider，当我运行我的 webpack 命令时，我得到了这个错误 -

ERROR in ./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 App from "./App.js";

这是我的 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 和 css 中运行了“npx webpack”。