Webpack dev server 如何确保Web包开发服务器中的热CSS在JS之前加载？

我正在使用WebpackDevServer热加载包括CSS在内的所有资产。但目前，我的CSS加载在JavaScript之后，这会导致我的应用程序在一些依赖于现有布局的地方出现问题

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

我在想，一定有办法从

模块

实现这一点，也许我可以挂接一个回调？或者通过配置样式加载器使其具有优先级

这是我的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问题上也提出了一个类似的问题：

看起来没有事件、回调或任何方法来检测样式是否已加载。经过长时间的徒劳搜索，我不得不做一些非常肮脏的事情：

function checkCSS() {
  const repeat = requestAnimationFrame(checkCSS);
  // CSS loaded?
  if(getComputedStyle(document.body).boxSizing === 'border-box') {
    routes.loadEvents() // Init JS
    cancelAnimationFrame(repeat) // Cancel next frame
  }
}
if (process.env.NODE_ENV !== 'production') {
  checkCSS()
} else {
  $(document).ready(() => {
    routes.loadEvents()
  })
}

因为我的样式中有

*{box size:border box；}

，而且我非常确定本机CSS样式永远不会像这样，所以我可以~99%确定加载了我自己的CSS

---

我写这篇文章的时候死了。希望我们能找到更好的方法

我遇到了完全相同的问题，在生产中css被提取，因此它总是可以工作，但是在开发中，由于

样式加载器

“有时在主包之后执行”我遇到了主包将计算由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 } }
            ]
        }
    )
}

---

目前，我认为最好的方法实际上可能是不完全使用Sass。虽然它不能直接解决这个问题，但我有一个完全相同的东西：JS组件依赖现有的DOM样式进行各种计算。使用singleton也对我有用，谢谢。