0
我目前正在設置我的webpack以將所有.css
和.scss
文件解壓縮爲1個大文件,該文件使用extract-text-webpack-plugin
完成。我可以看到該文件被正確編譯幷包含在html中(使用html-webpack-plugin
創建)。但由於某種原因,CSS不適用於實際頁面。CSS已加載,但未通過webpack應用
進入
entry: {
app: [
'react-fastclick',
'./js/index.js',
],
styles: './styles/global.scss'
}
規則
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[hash:base64:5]',
minimize: true,
sourceMap: true
},
},
{
loader: 'sass-loader',
options: {
outputStyle: 'collapsed',
sourceMap: true,
includePaths: [path.resolve(__dirname, 'src')]
},
},
],
publicPath: '/dist'
})
}
// ...
]
插件
plugins: [
new HtmlWebpackPlugin({
title: 'Wizer',
hash: false,
production: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
},
template: 'index.ejs',
}),
new ExtractTextPlugin({
filename: '[name].[chunkhash].css',
disable: false,
allChunks: true
}),
// ...
]
HTM L個輸出
<!DOCTYPE html>
<html>
<head>
<link rel="preload" href="/app.f599f29bd646377f7788.js" as="script">
<link rel="preload" href="/styles.e3acd4dcb1836b477ae7.css" as="script">
<link rel="preload" href="/vendor.52867bd4bd63ce12d65a.js" as="script">
<link href="/styles.e3acd4dcb1836b477ae7.css" rel="stylesheet">
</head>
<body>
<div id="react_root"></div>
<script type="text/javascript" src="/vendor.52867bd4bd63ce12d65a.js"></script>
<script type="text/javascript" src="/app.f599f29bd646377f7788.js"></script>
</body>
</html>
[webpack2:如何導入Bootstrap CSS for react-bootstrap以查找其樣式?](https://stackoverflow.com/questions/42436728/webpack2-how-to-import-bootstrap-css-for -react-bootstrap-find-its-styles) –
這確實與'模塊'設置爲'true'有關,謝謝! – NealVDV