无法在反应中导入css文件

Posted 2023-02-21

【中文标题】无法在反应中导入css文件

【英文标题】：Not able to import css files in react

【发布时间】：2020-11-06 01:43:02

【问题描述】：

在 App.js 中，我想导入 App.css 文件或任何 css 文件。 import './App.css' 在这里不起作用并给出错误“./src/shared/App.css 1:0 中的错误” 模块解析失败：意外令牌(1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见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】：

要在 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',...]