Question

我有一个使用样式化组件的react项目，并且我试图将CSS文件作为react-image-gallery

的一部分包含在内

我遵循了将css-loader和style-loader包含在我的项目中的步骤，并尝试像这样导入文件

import 'react-image-gallery/styles/css/image-gallery.css

，并将以下内容包含在Webpack配置规则中

{
  test: /\.css$/i,
  use: ['style-loader', 'css-loader'],
}

运行服务器时，我收到以下错误消息

SyntaxError: Invalid or unexpected token

(function (exports, require, module, __filename, __dirname) { @charset "UTF-8";

在上述CSS文件中

通过一些谷歌搜索，我知道这是因为Webpack将CSS文件作为JS文件包含在内。但这不是应该的样子吗？

附加信息：我有一个服务器端渲染的应用程序。

我在做什么错了？

更新：

我的规则如下

rules.ts文件

import webpack from 'webpack'

const ts: webpack.RuleSetRule = {
  test: /^(?!.*\.spec\.tsx?$).*\.tsx?$/,
  exclude: /node_modules/,
  use: ['babel-loader'],
}

const img: webpack.RuleSetRule = {
  test: /\.(png|jpe?g|gif|svg)$/,
  use: 'file-loader',
}

const css: webpack.RuleSetRule = {
  test: /\.css$/i,
  use: ['style-loader', 'css-loader'],
}

export default {
  client: {
    ts,
    img,
    css,
  },
  server: {
    ts,
    css,
    img: { ...img, use: [{ loader: 'file-loader', options: { emitFile: false } }] },
  },
}

具有以下内容的配置文件

const config: webpack.Configuration = {
  context: path.join(__dirname, '../../src/client'),
  resolve: {
    ...resolve.client,
    alias: { 'react-dom': '@hot-loader/react-dom' },
  },
  devtool: false,
  entry: {
    main: ['./index.tsx'],
  },
  mode: 'development',
  module: {
    rules: [rules.client.ts, rules.client.img, rules.client.css],
  },
  output: output.client,
  plugins: [
    ...plugins,
    ...developmentPlugins,
    new ForkTsCheckerWebpackPlugin({
      tsconfig: path.join(__dirname, '../../tsconfig.fork-ts-checker-webpack.plugin.json'),
    }),
    new CleanWebpackPlugin({
      cleanAfterEveryBuildPatterns: ['!webpack.partial.html', '!favicon.ico'],
    }),
  ],
}

Answer 1

我们有4位同事陷入这样的问题。实际上，我们有一个插件“ nodemon-webpack-plugin”，我们已为其配置了webpack。

此插件试图将.css之类的文件作为Java脚本文件执行。

我们终于删除了此插件，因为我们已经有一个可以运行的mon。

在反应项目中使用webpack无效或意外的令牌加载css文件

1 个答案: