Webpack 将 CSS 加载到单独的 <style> 标签中
Webpack loading CSS into individual <style> tags
我目前正在使用以下 Webpack 配置来导入和解析我在 React 组件中进行的 SCSS 导入。
我的问题的症结在于配置的 CSS 部分。目前,我正在使用相关 React 组件中的绝对文件路径导入 SCSS 文件。但是在渲染时,每个单独的 CSS 导入都有自己的 <style>
标签,这导致我的网络应用程序的头部散落着十几个 <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
}
这是客户端当前发生的情况的屏幕截图:
我试过使用 但没用
{
loader: 'style-loader'
options: {
singleton: true
}
}
来自 https://www.npmjs.com/package/style-loader
这是你要找的吗?
同样(见评论)使用style-loader?singleton
可以直接在旧版本中使用。
如果您使用的是 style-loader v1.0.0,"singleton" 选项已被删除。
您可以改用 "injectType"。
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag',
}
}
我目前正在使用以下 Webpack 配置来导入和解析我在 React 组件中进行的 SCSS 导入。
我的问题的症结在于配置的 CSS 部分。目前,我正在使用相关 React 组件中的绝对文件路径导入 SCSS 文件。但是在渲染时,每个单独的 CSS 导入都有自己的 <style>
标签,这导致我的网络应用程序的头部散落着十几个 <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
}
这是客户端当前发生的情况的屏幕截图:
我试过使用
{
loader: 'style-loader'
options: {
singleton: true
}
}
来自 https://www.npmjs.com/package/style-loader
这是你要找的吗?
同样(见评论)使用style-loader?singleton
可以直接在旧版本中使用。
如果您使用的是 style-loader v1.0.0,"singleton" 选项已被删除。 您可以改用 "injectType"。
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag',
}
}