无法从css-loader读取

Question

我有一个问题，做npm启动，这似乎是一个错误的css-loader，但我不能解决它。

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown; }

/*# sourceMappingURL=ReactToastify.css.map */
^
      Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"
Failed to compile.

./node_modules/@inrupt/solid-style-guide/css/main.css
Unknown word (2:1)

  1 |
> 2 | var content = require("!!../../../css-loader/index.js??ref--8-oneOf-3-1!../../../postcss-loader/src/index.js??postcss!./main.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];
  5 |
    at runMicrotasks (<anonymous>)

我读了这篇文章，但我不能让它工作：https://github.com/ReactJSResources/react-webpack-babel/issues/197

我还修改了webpack.config.js，添加了：const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

和：

{
          test: /\.s?css$/,
          use: [MiniCssExtractPlugin.loader, 
            {
              loader: 'css-loader',
              options: {
                localsConvention: 'camelCase',
                modules: true
              }
            },
            'sass-loader',
            'import-glob-loader'
          ]
        },
        { 
          test: /\.css$/, loader: 'css-loader'
        },

如果有人能帮上忙的话...

非常感谢。

Answer 1

你在使用React吗?？并尝试使用以下命令将css作为模块加载：

import styles from "./style.css";

如果是：

在react 16.13和所有更高版本中，对于css模块，您必须使用不同的文件命名，如：

css文件名：

ComponentName.module.css (假设您的组件名称为ComponentName)

css文件也驻留在与组件相同的文件夹中

因此，import语句将如下所示：

import styles from "./ComponentName.module.css";

Answer 2

是的，我正在使用react，但我认为我的问题在这里：

`.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown; }

/*# sourceMappingURL=ReactToastify.css.map */
^
      **Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"**
Failed to compile.
Failed to compile.

./node_modules/@inrupt/solid-style-guide/css/main.css
Unknown word (2:1)

  1 |
> 2 | var content = require("!!../../../css-loader/index.js??ref--8-oneOf-3-1!../../../postcss-loader/src/index.js??postcss!./main.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];
  5 |
    at runMicrotasks (<anonymous>)`