11

我正在使用 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'
},

在这个 style-loader Github 问题上也提出了类似的问题：https ://github.com/webpack/style-loader/issues/121

4

2 回答 2

6

我遇到了完全相同的问题，在生产中提取了 css，因此它始终可以工作，但是在开发中，由于style-loader“有时在主包之后执行”，我遇到了主包会计算 DOM 中某些节点的大小的问题这是由 css 设置的......所以它可能导致错误的大小，因为主 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 } }
            ]
        }
    )
}
于 2018-03-12T04:32:35.357 回答
1

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

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 样式永远不会像这样，所以我可以确定我自己的 CSS 已加载 ~99%。

写到这里我有点死了。希望我们能找到更好的方法！

于 2017-10-13T13:10:21.533 回答