javascript – webpack并反应识别css类名

2023年2月22日 224次阅读

我有一个React组件,我试图导入CSS.

import './Example.css';

class Example extends Component {
  return <div className="example-class">Example</div>
}

我的文件结构如下所示

build
  -index.js
src
  -index.js
  -Example.css

我的webpack.config.js如下所示.

目前一切都在构建,但css似乎没有被提升.

任何人都可以看到我需要做什么才能在构建后访问我的类名？

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
    },
    {
      test: /\.css$/,
      use: [ 'css-loader' ]
    }
    ]
  },
  externals: {
    'react': 'commonjs react'
  }
};

最佳答案 css-loader只处理CSS,但不能在浏览器中使用它.您可以使用
style-loader,将CSS注入< style>标签. (另见
Loading CSS)

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

另一种可能性是使用extract-text-webpack-plugin提取CSS.它将提取CSS并创建除JavaScript包之外的.css文件.然后,您可以在HTML中包含CSS.

点赞