NodeJS Babel服务器上的内联CSS

时间:2018-07-29 02:08:11

标签: css node.js inline babel

我在前一篇帖子中含糊地描述了我的问题,不幸的是它被忽略了。我的问题是,当我在服务器端呈现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"
                ]
            }
        ]
    ]
}

0 个答案:

没有答案