React Webpack Extract Text Plugin . 我究竟做错了什么？我的样式来自bundle.js，但我试图将它们移到bundle.css-Java 学习之路

我正在使用scss编写我的样式，并且我正在使用css模块，因此每个组件都有自己的样式 .

我的webpack代码如下，但这是我的问题 .

我希望我的prod包有一个单独的CSS包 . 我能够生成一个单独的CSS bundle.css ，但没有任何组件之间的映射到样式 . 因此，它破坏了引导样式 .

if (__PROD) {
  config = {
    devtool: 'cheap-module-source-map',
    context: appPath,
    entry: [
      'main.js'
    ],
    resolve: {
      root: appPath,
      extensions: ['', '.js', '.jsx']
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          loaders: [
            'babel'
          ],
          include: appPath
        },
        {
          test: /\.scss$/,
          // loader: ExtractTextPlugin.extract('style', 'css!postcss!sass'),
          loader: ExtractTextPlugin.extract('css!postcss!sass')
        }
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('production')
        }
      }),
      new webpack.optimize.UglifyJsPlugin({
        compressor: {
          warnings: false
        }
      }),
      new ExtractTextPlugin('bundle.css')
    ],
    postcss: [
      autoprefixer({ browsers: ['last 3 versions'] })
    ],
    output: {
      path: buildPath,
      publicPath: '/',
      filename: 'bundle.js'
    }
  };
}

2 回答

0
我正在使用css模块

您可能在dev配置中使用它们，但是您没有在生产环境配置中启用它们 . 将 modules 选项添加到 ExtractTextPlugin 中的 css-loader .
```
ExtractTextPlugin.extract('css?modules!postcss!sass')
```
回复于 2024-05-05T19:12:13+08:00
0
尝试在 entry 中添加css文件 .
```
entry: [
    'main.js',
    'yourFile.css'
]
```
回复于 2024-05-05T19:12:13+08:00

React Webpack Extract Text Plugin . 我究竟做错了什么？我的样式来自bundle.js，但我试图将它们移到bundle.css

2 回答

相关问题