如何为webpack的bootstrap设置loader？或者有比webpack更好的选择吗？

我在添加css-loader为我的引导到webpack卡住了，请帮助。
我的文件结构：
x1c 0d1x的数据
style.scss

// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";

字符串
index.js

import React from "react";
import ReactDOM from "react-dom/client";
// import 'bootstrap/dist/css/bootstrap.min.css';

// Import our custom CSS
import "../scss/styles.scss";
// import "!style!css!bootstrap/dist/css/bootstrap.min.css";

// Import all of Bootstrap's JS
// import * as bootstrap from "bootstrap";

import App from "./App";
import "react-toastify/dist/ReactToastify.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

型
webpack.config.js

const path = require("path");

module.exports = {
    entry: path.resolve(__dirname, "./src/index.js"),
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [
                    { loader: "babel-loader" },
                    {
                        loader: "style-loader",
                    },
                    {
                        loader: "css-loader",
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: () => [require("autoprefixer")],
                            },
                        },
                    },
                    {
                        loader: "sass-loader",
                    },
                ],
            },
        ],
    },
    resolve: {
        extensions: ["*", ".js", ".jsx"],
    },
    output: {
        path: path.resolve(__dirname, "./public"),
        filename: "bundle.js",
    },
    devServer: {
        static: path.resolve(__dirname, "./public"),
    },
};

型
生成的错误为

./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].r [built] [code generated] [1 error]

ERROR in ./src/index.js (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/di./src/index.js)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
SassError: SassError: expected "{".
  ╷
1 │ import React from "react";
  │                          ^
  ╵
  src\index.js 1:26  root stylesheet
    at Object.loader (C:\Users\krisarya\My Profile\Github-krishnaacharya-official\vivans-web-frontend\node_modules\sass-loader\dist\index.js:56:14)
 @ ./src/index.js 7:0-203 14:17-24 16:7-21 42:25-39 43:36-47 43:50-64 44:188-51:5 45:52-63 45:66-80 49:34-45 49:48-62 50:13-20 57:0-179 57:0-179 58:15-22 58:26-40 58:43-57 
44:4-51:6

webpack 5.76.3 compiled with 1 error in 2291 ms

型

sass-loader、css-loader、postcss-loader和style-loader应应用于SCSS文件，但您将它们应用于/\.(js|jsx)$/文件。

module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            // Adds CSS to the DOM by injecting a `<style>` tag
            loader: 'style-loader'
          },
          {
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: 'css-loader'
          },
          {
            // Loader for webpack to process CSS with PostCSS
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [
                  require("autoprefixer")
                ]
              }
            }
          },
          {
            // Loads a SASS/SCSS file and compiles it to CSS
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }

字符串
有一个official guide，用于如何使用Webpack在项目中包含和捆绑Bootstrap的CSS和JavaScript。

如何为webpack的bootstrap设置loader？或者有比webpack更好的选择吗？

1条答案

相关问题

热门标签

最新问答