模塊構建失敗（來自./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”。