Webpack将CSS加载到单独的<style>标记中-Java 学习之路

我目前正在使用下面的Webpack配置来导入和解析我在React组件中进行的SCSS导入 .

我的问题的关键在于配置的CSS部分 . 目前，我正在使用其相关React组件中的绝对文件路径导入SCSS文件 . 但是在渲染时，每个单独的CSS导入都会获得自己的 <style> 标记，从而导致在我的Web应用程序的头部散布着十几个 <style> 标记 . 有没有办法调整配置，使输出的CSS进入单个 <style> 标签？也许可以按照特定条目进入我的应用程序的React加载顺序：

entry: {
  app: [
    '<React Component that's top of the render tree>',
  ],
},

我可以使用 ExtractTextPlugin 和 style-loader 模块将所有CSS提取到单个文件中 . 但是，这与在客户端上实际加载CSS本质上是不同的 .

const webpack = require('webpack');
const config = require('./webpack.client.base.config');

const devBuild = process.env.NODE_ENV !== 'production';

config.output = {
  filename: '[name]-bundle.js',
  path: '../app/assets/javascripts/generated',
  publicPath: '/assets/generated/',
};

config.module.loaders.push(
  {
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
  },
  {
    test: /\.css$/,
    loader: 'style!css',
  },
  {
    test: /\.scss$/,
    loader: 'style-loader!css-loader!postcss-loader!sass-loader',
  }
);

module.exports = config;

if (devBuild) {
  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
  module.exports.devtool = 'eval-source-map';
} else {
  config.plugins.push(
    new webpack.optimize.DedupePlugin()
  );
  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}

以下是客户端当前正在发生的事情的屏幕截图：
enter image description here

我已经尝试使用style-loader singleton option但它没有用

1 回答

3
```
{
  loader: 'style-loader'
  options: {
    singleton: true
  }
}
```
来自https://www.npmjs.com/package/style-loader

那是你在看什么？

另外（见注释）使用 style-loader?singleton 可以直接在旧版本中使用 .
回复于 2024-04-27T23:01:08+08:00

Webpack将CSS加载到单独的<style>标记中

1 回答

相关问题