Question

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

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

我认为必须有一种方法可以从module执行此操作，也许是我可以挂钩的回调？或者可能通过将样式加载器配置为具有优先级？

这是我的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＆＃34;有时在主束＆＃34;之后执行。我有一些问题，主要的包将计算由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 } }
            ]
        }
    )
}

Answer 2

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

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-sizing: border-box; }并且我非常确定原生的CSS样式不会像这样，我可以~99％确定我自己的CSS已加载。

我写了一点写道。希望我们能找到更好的方法！

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

2 个答案: