2017-07-25 49 views
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> 
+1

[webpack2:如何導入Bootstrap CSS for react-bootstrap以查找其樣式?](https://stackoverflow.com/questions/42436728/webpack2-how-to-import-bootstrap-css-for -react-bootstrap-find-its-styles) –

+0

這確實與'模塊'設置爲'true'有關,謝謝! – NealVDV

回答

0

去除固定它爲我css-loadermodules,它創造局部範圍的CSS。