Question

我正在尝试将旋转木马导入我的项目中，无论我使用哪一个，我都会收到错误，说you may need an appropriate loader指向旋转木马css文件

  {
    test: /\.s?css$/,
    include: [/src/],
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader', 'postcss-loader', 'sass-loader'],
    }),
  },

我这样做肯定会覆盖它吗？

可以发布更多代码，但错误来自此处：react-responsive-carousel/lib/styles/carousel.min.css:1

SyntaxError: Unexpected token .

Answer 1

尝试添加loader:'style!css!'

  {
    test: /\.s?css$/,
    include: [/src/],
    loader:'style!css!',
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader', 'postcss-loader', 'sass-loader'],
    }),
  },

尝试2

尝试将测试更新为test: /\.css$/,（远景）

  {
    test: /\.css$/,
    include: [/src/],
    loader:'style!css!',
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader', 'postcss-loader', 'sass-loader'],
    }),
  },

尝试3

尝试以这种方式设置加载器

loaders: ['style-loader', 'css-loader'],

或

loader: "style-loader!css-loader"

Answer 2

如果要添加多个加载器，请执行此操作

像这样npm install --save-dev css-loader

安装模块

{
    test: /\.css$/,
    exclude: /node_modules/,
    use: ExtractTextPlugin.extract({
       fallback: "style-loader",
       use: [
           {
              loader: 'css-loader'
           },
           {
              loader: 'postcss-loader'
           }
           // more loaders if you have any
           // Make sure you installed this loaders
        ]
    })
}

如果有任何问题，请尝试让我知道。

参考here

Answer 3

确保您更新包含以包含 / node_mobuldes

如果这不起作用，请尝试分离你的css和sass loader。

{
  test: /\.css$/,
  include: [/node_modules/, /src/],
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'postcss-loader', 'sass-loader'],
  }),
},
{
  test: /\.scss$/,
  include: [/src/],
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'postcss-loader', 'sass-loader'],
  }),
},

Answer 4

尝试在css / scss文件中导入carousel css，如下所示

@import "~react-responsive-carousel/lib/styles/carousel.min.css";

然后在您的webpack文件中尝试此设置

  {
    test: /\.css$/,
    exclude: /node_modules/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: 'css-loader!postcss-loader',
    }),
  };
  {
    test: /\.scss$/,
    exclude: /node_modules/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: 'css-loader!postcss-loader!sass-loader',
    }),
  };

css loader无法正常工作

4 个答案: