.CSS 文件的 Webpack 规则

编程问答 2022-05-29

问题描述

我在这个从网上获取的样板代码之上构建我的 react-electronjs 应用程序。 但它只能导入 .global.css 而不能导入 .css 文件。

我添加了 webpack 规则，以便能够导入 here 中提到的 .css 文件。但是，它仍然让我出现以下错误。

ERROR in ./app/components/Modal.global.css (./node_modules/css-loader??ref--5-1!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/dist/cjs.js!./app/components/Modal.global.css)
Module build Failed (from ./node_modules/css-loader/index.js):
UnkNown word (2:1)

  1 |
> 2 | var content = require("!!../../node_modules/css-loader/index.js!../../node_modules/sass-loader/dist/cjs.js!./Modal.global.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id,content,'']];
  5 |

 @ ./app/components/Modal.global.css 2:14-217 21:1-42:3 22:19-222
 @ ./app/components/ClusterVideo.js
 @ ./app/ViewManager.js
 @ ./app/index.js
 @ multi react-hot-loader/patch webpack-dev-server/client?http://localhost:1212/ webpack/hot/only-dev-server ./app/index.js

ERROR in ./app/styles/NFS.css (./node_modules/css-loader??ref--6-1!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/dist/cjs.js!./app/styles/NFS.css)
Module build Failed (from ./node_modules/css-loader/index.js):
UnkNown word (2:1)

  1 |
> 2 | var content = require("!!../../node_modules/css-loader/index.js!../../node_modules/sass-loader/dist/cjs.js!./NFS.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id,'']];
  5 |

 @ ./app/styles/NFS.css 2:14-208 21:1-42:3 22:19-213
 @ ./app/components/NFS.js
 @ ./app/components/Main.js
 @ ./app/ViewManager.js
 @ ./app/index.js
 @ multi react-hot-loader/patch webpack-dev-server/client?http://localhost:1212/ webpack/hot/only-dev-server ./app/index.js

这是我的 webpack 规则

 module: {
    rules: [
      {
        test: /\.jsx?$/,exclude: /node_modules/,use: {
          loader: 'babel-loader',options: {
            cacheDirectory: true
          }
        }
      },{
        test: /\.global\.css$/,use: [
          {
            loader: 'style-loader'
          },{
            loader: 'css-loader',options: {
              sourceMap: true
            }
          }
        ]
      },// SASS support - compile all .global.scss files and pipe it to style.css
      {
        test: /\.global\.(scss|sass)$/,options: {
              sourceMap: true
            }
          },{
            loader: 'sass-loader'
          }
        ]
      },// SASS support - compile all other .scss files and pipe it to style.css
      {
        test: /^((?!\.global).)*\.(scss|sass)$/,options: {
              modules: true,sourceMap: true,importLoaders: 1,localIdentName: '[name]__[local]__[hash:base64:5]'
            }
          },{
        // test: /^((?!\.global).)*\.(css)$/,test: /\.(s*)css$/,use: ['style-loader','css-loader','sass-loader']
      }
    ]
  }

为什么会这样？我是 CSS 预处理器的新手。

编辑：我添加了以下规则。它现在正在工作。

     {
        test: /^((?!\.global).)*\.css$/,'css-loader']
      },

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

electronelectronlessreactjsreactjsreactjsreactjssasssass