Question

我正在尝试让webpack将一些scss内联到生成的html文件中，以用作我的app-shell css。

这个想法是让webpack将任何以'-file.scss'结尾的scss文件捆绑到一个css文件中，并在结尾'-shell.scss'的文件中内联任何scss。

通过这种方式，我可以在做出反应或其他任何事情之前将我的app-shell设置为样式。

通过内联我的意思是将它放在生成的html文件中的STYLE标签中。

我的webpack的css部分是：

    {
            test: /\.css$/,
            include: [paths.appSrc, paths.appNodeModules],
            // Disable autoprefixer in css-loader itself:
            // https://github.com/webpack/css-loader/issues/281
            // We already have it thanks to postcss.
            loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss')
        },
        {
            test: /-shell\.scss$/,
            include: paths.appSrc,
            loaders: ['style', 'css', 'sass'],
        },
        {
            test: /-file\.scss$/,
            include: paths.appSrc,
            loader: ExtractTextPlugin.extract('style', 'css!sass'),
        },

我原以为从“test：/-shell.scss$/”中删除ExtractTextPugin加载程序会这样做，但它不会将这些样式放入生成的html构建文件中的STYLE标记中。

我已经从https://github.com/facebookincubator/create-react-app

改编了Create React App设置

如何将webpack内联css转换为生成的html文件

0 个答案: