CSS is loaded but not applied via webpack -
i'm setting webpack extract .css , .scss files 1 large file done using extract-text-webpack-plugin. can see file correctly compiled , included html (created html-webpack-plugin). reason css not applied actual page.
entry
entry: { app: [ 'react-fastclick', './js/index.js', ], styles: './styles/global.scss' } rules
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
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 }), // ... ] html output
<!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>
removing modules css-loader fixed me, creating locally scoped css.
Comments
Post a Comment