React无法导入CSS文件

8
在App.js中,我想导入App.css文件或任何CSS文件。import './App.css'在这里不起作用,并且出现错误“ERROR in ./src/shared/App.css 1:0 Module parse failed: Unexpected token (1: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
目录结构 -
 1. public
    - bundle.js
 2. src
    -  browser (folder) > index.js 
    -  server (folder) > index.js
    -  server (folder) >  App.js , App.css

这是我的webpack.config.js文件 -

    var path = require('path')
    var webpack = require('webpack')
    var nodeExternals = require('webpack-node-externals')
    var combineLoaders = require('webpack-combine-loaders');
    
    var browserConfig = {
      entry: './src/browser/index.js',
      output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js',
        publicPath: '/'
      },
      module: {
        rules: [
          { test: /\.(js)$/, exclude: /node_modules/, use: ['babel-loader']},
          {
            test: /\.css$/,
            exclude: /node_modules/,
            loader: combineLoaders([
              {
                loader: 'style-loader'
              }, {
                loader: 'css-loader',
                query: {
                  modules: true,
                  localIdentName: '[name]__[local]___[hash:base64:5]'
                }
              },
            ])
          }
        ]
      },
      resolve: {
        extensions: ['*', '.js', '.jsx', '.css']
      },
      mode: 'production',
      plugins: [
        new webpack.DefinePlugin({
          __isBrowser__: "true"
        })
      ]
    }
    
    var serverConfig = {
      entry: './src/server/index.js',
      target: 'node',
      externals: [nodeExternals()],
      output: {
        path: __dirname,
        filename: 'server.js',
        publicPath: '/'
      },
      mode: 'production',
      module: {
        rules: [
          { test: /\.(js)$/, exclude: /node_modules/, use: ['babel-loader']},
          {
            test: /\.css$/,
            exclude: /node_modules/,
            loader: combineLoaders([
              {
                loader: 'style-loader'
              }, {
                loader: 'css-loader',
                query: {
                  modules: true,
                  localIdentName: '[name]__[local]___[hash:base64:5]'
                }
              }
            ])
          }
        ]
      },
        resolve: {
          extensions: ['*', '.js', '.jsx', '.css']
        },
      plugins: [
        new webpack.DefinePlugin({
          __isBrowser__: "false"
        })
      ]
    }
    
    module.exports = [browserConfig, serverConfig]

1个回答

0
在你的ReactJS项目中加载CSS文件,需要安装ReactJS的css-loader...
npm install --save-dev style-loader css-loader

此外,请确保修改您的webpack.config.js文件,该文件位于我的项目中:./node_modules/webpack-dev-server/client/webpack.config.js。您需要添加加载器,它们看起来会像这样...
module.exports = {
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loaders: 'babel', query: { presets: ['react', 'es2015', 'stage-1'] } },
      { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
  },
  ...
}

最后,请确保在webpack.config.js中为CSS设置了解析规则...

resolve: {
  extensions: ['', '.js', '.css',...]
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接