我在前一篇帖子中含糊地描述了我的问题,不幸的是它被忽略了。我的问题是,当我在服务器端呈现CSS时,我试图将CSS内联到HTML中。所有教程仅显示制作外部文件的解决方案。我想要传统的“样式加载器”内联行为。我正在使用Webpack,React,NodeJS和Babel。
Webpack配置:
const ExtractTextPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
entry: './src/js/app.js',
output: {
path: __dirname + "/src/js/",
filename: 'app.bundle.js'
},
mode: 'development',
plugins: [
new ExtractTextPlugin({
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
})
],
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
extractComments: true
}),
new OptimizeCssAssetsPlugin({}),
new CompressionPlugin()
]
},
module: {
rules: [
{
test: /\.(jsx|js)?$/,
exclude: /(node_modules)/,
use: [{
loader: "babel-loader",
options: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}]
},
{
test: /\.(sc|c)ss$/,
use: [
devMode ? 'style-loader' : ExtractTextPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: 'ko_[sha1:hash:hex:3]'
}
},
'sass-loader'
],
}
]
},
};
.babelrc
{
"presets": [
"es2015",
"react"
],
"plugins": [
[
"css-modules-transform",
{
"generateScopedName": "ko_[sha1:hash:hex:3]",
"extensions": [
".scss"
]
}
]
]
}