rac*_*arg 3 javascript css sass bundler webpack
我已经使用 webpack 2 捆绑了我的应用程序代码。在我的主模块上使用了 require 语句来嵌入一个 SCSS 文件。
require('./styles/styles.scss');
Run Code Online (Sandbox Code Playgroud)
虽然在所有浏览器中一切正常,但在加载应用程序时会出现 FOUC(无样式内容的 Flash)。
这是所有 webpack 模块加载的方式,因为 CSS 文件被动态注入到标题中,还是我在 webpack 配置中做错了什么?
这是 webpack 配置的片段 - 加载器部分:
{
test: /\.scss$/,
loaders: [ 'style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap' ]
}
Run Code Online (Sandbox Code Playgroud)
虽然这不会造成任何副作用,但如果避免的话会更好。
谢谢。
现在,您的样式已烘焙到 JS 文件中。在您的情况下,浏览器需要一段时间来解析 javascript,只有在处理后才能将样式应用于页面。这导致了 FOUC。
为了解决这个问题,开发了ExtractTextPlugin。基本上它的作用是取出指定的 css 并将其放入单独的 css 文件中。基本配置如下所示:
const plugin = new ExtractTextPlugin({
filename: '[name].[contenthash:8].css',
});
module: {
rules: [ {
test: /\.css$/,
use: plugin.extract({
use: 'css-loader',
fallback: 'style-loader',
})
}]
},
plugins: [ plugin ]
Run Code Online (Sandbox Code Playgroud)
如果您没有使用html-webpack-plugin ,那么您必须将生成的文件附加到您的 HTML 页面。通过在节中链接生成的文件,您将摆脱 FOUC。
归档时间: |
|
查看次数: |
1430 次 |
最近记录: |