我正在使用webpack-dev-server来加载我的所有资产,包括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 Issue：https://github.com/webpack/style-loader/issues/121中也提出了类似的问题
解决方法
我有一个非常相同的问题,在生产中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 } }
]
}
)
}
