webpack-dev-server - 如何确保 webpack-dev-server 中的热 CSS 在 JS 之前加载？

Question

我正在使用 webpack-dev-server 来热加载我的所有 Assets ，包括 CSS。目前，我的 CSS 在 JavaScript 之后加载，这导致我的应用程序在某些依赖现有布局的地方出现问题。

如何确保在 JavaScript 执行之前加载 CSS？

我认为必须有一种方法可以从 module 做到这一点，也许是一个我可以 Hook 的回调？或者也许通过配置样式加载器具有优先权？

这是我的 index.js:

import './styles/main.scss';
import './scripts/main.js';

if (module.hot) {
  module.hot.accept();
}

这是我的样式加载器:

{
        test: /\.(scss)$/,
        loader: 'style!css?&sourceMap!postcss!resolve-url!sass?sourceMap'
},

在此样式加载器 Github 问题中也提出了类似的问题: https://github.com/webpack/style-loader/issues/121

Answer 1

我遇到了完全相同的问题，在生产中，css 被提取出来，所以它总是可以工作，但是在开发中，因为 style-loader “有时在主包之后执行”我遇到了问题，主包会计算由 css 设置的 DOM 中某些节点的大小......所以它可能导致错误的大小，因为主 css 仍未加载.. . 我通过选项 singleton:true 解决了这个问题.

例子:

{
    test: /\.s?css$/,
    loader: ExtractTextPlugin.extract({
            fallback: [
                {
                    loader: 'style-loader',
                    options: { singleton: true }
                }
            ],
            use: [
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                        minimize: !isProduction,
                        sourceMap: !isProduction
                    }
                },
                { loader: 'postcss-loader', options: { sourceMap: !isProduction, ...postcss } },
                { loader: 'resolve-url-loader', options: { sourceMap: !isProduction } },
                { loader: 'sass-loader', options: { sourceMap: true } }
            ]
        }
    )
}