javascript 如何在webpack中添加css文件的加载程序？

uajslkp6 于 2023-02-02 发布在 Java

关注(0)|答案(1)|浏览(129)

我试图使用react-datetime-range-picker，当我导入它时，我开始出错。我尝试过其他解决方案，但没有成功。
完全错误

javascript modules 6.14 KiB 
./src/pages/Campaign/CampaignNew.js 2.39 KiB [built] 
./node_modules/react-datetime-range-picker/dist/style.css 3.75 KiB [built] [1 error] 
ERROR in ./node_modules/react-datetime-range-picker/dist/style.css 5:0 
Module parse failed: Unexpected token (5:0)  
You may need an appropriate loader to handle this file type, currently no loaders are configured
to process this file. See https://webpack.js.org/concepts#loaders   
|  */ 
|  
> .rdt {
|   position: relative; 
| }  
@ ./node_modules/react-datetime-range-picker/dist/index.js 27:0-22  
@ ./src/pages/Campaign/CampaignNew.js 3:0-62 
@ ./src/App.js 6:0-55 16:46-57  
@ ./src/index.js 1:0-24

我检查了webpack.config.js，但它看起来正确。我安装了style-loader、css-loader
webpack.config.js

const path = require("path");
const webpack = require("webpack");
require('dotenv').config({path: './.env'});

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/app_chat/js"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.(sass|scss|css)$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env),
    }),
  ],
};

package.json

{
  "name": "app_chat",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.20.12",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "axios": "^1.2.4",
    "babel-loader": "^9.1.2",
    "dotenv": "^16.0.3",
    "react": "^18.2.0",
    "react-datetime": "^3.2.0",
    "react-datetime-range-picker": "^3.0.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.7.0",
    "react-switch": "^7.0.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  },
  "devDependencies": {
    "css-loader": "^6.7.3",
    "style-loader": "^3.3.1"
  }
}

我应该怎么做才能解决这个问题？

JavaScript

来源：https://stackoverflow.com/questions/75318809/how-to-add-loader-for-css-files-in-webpack

1条答案

按热度按时间

gojuced71#

如果您希望安装用于开发和生产，请尝试以下步骤：（南苏丹支助处）

安装以下软件包：

yarn add -D postcss-loader postcss-flexbugs-fixes postcss-preset-env style-loader mini-css-extract-plugin 
postcss-normalize resolve-url-loader sass-loader

按如下所示更新Webpack配置：

{
          test: /\.s?[ac]ss$/,
          //removed (exclude: /node_modules/) to enable using external styles
          use: [
            {
              // style-loader => insert styles in the head of the HTML as style tags or in blob links
              // MiniCssExtractPlugin => extract styles to a file
              loader: isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
              //if source map is set to true from previous loaders => this loader will be true as well
            },
            {
              //Resolves @import statements
              loader: 'css-loader',
              options: {
                // used for debugging the app (to see from which component styles are applied)
                sourceMap: isDevelopment,
                // Number of loaders applied before CSS loader (which is postcss-loader)
                importLoaders: 3,
                // the following is used to enable CSS modules
                ...(isCssModules
                  ? {
                      modules: {
                        //exclude external styles from css modules transformation
                        auto: (resourcePath) => !resourcePath.includes('node_modules'),
                        mode: (resourcePath) => {
                          if (/global.scss$/i.test(resourcePath)) {
                            return 'global';
                          }

                          return 'local';
                        },
                        localIdentName: isDevelopment ? '[name]_[local]' : '[contenthash:base64]',
                        localIdentContext: srcPath,
                        localIdentHashSalt: 'react-boilerplate',
                        exportLocalsConvention: 'camelCaseOnly',
                      },
                    }
                  : {}),
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  ident: 'postcss',
                  plugins: [
                    'postcss-flexbugs-fixes',
                    postcssPresetEnv({
                      stage: 3,
                      //uncomment the following if you want to prefix grid properties
                      // autoprefixer: { grid: true },
                    }),
                    // Adds PostCSS Normalize as the reset css with default options,
                    // so that it honors browserslist config in package.json
                    // which in turn let's users customize the target behavior as per their needs.
                    'postcss-normalize',
                  ],
                },
                sourceMap: isDevelopment,
              },
            },
            {
              //Rewrites relative paths in url() statements based on the original source file
              loader: 'resolve-url-loader',
              options: {
                //needs sourcemaps to resolve urls (images)
                sourceMap: true,
              },
            },
            {
              //Compiles Sass to CSS
              loader: 'sass-loader',
              options: {
                sourceMap: true,
              },
            },
          ],
        },

查看以下存储库以供参考：
React webpack boilerplate

赞(0）回复(0）举报 2023-02-02

我来回答

javascript 如何在webpack中添加css文件的加载程序？

1条答案

相关问题

热门标签

最新问答