0
extract-text-webpack-pluginを使用してすべての.cssと.scssファイルを1つの大きなファイルに展開するようにWeb Packを設定しています。ファイルが正しくコンパイルされ、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 css-loaderからL出力modulesを削除
<!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：反応するブートストラップのスタイルを見つけるためのブートストラップCSSのインポート方法]（https://stackoverflow.com/questions/42436728/webpack2-how-to-import-bootstrap-css-for -react-bootstrap-to-find-its-styles） –
実際に 'true'に設定された' modules'との関係がありました。 – NealVDV