CSS wird geladen, aber nicht über Webpack angewendet

Ich richte gerade mein Webpack ein, um alle .css und .scss Dateien in eine große Datei zu extrahieren, die mit extract-text-webpack-plugin durchgeführt wird. Ich kann sehen, dass die Datei korrekt kompiliert und in den HTML-Code (erstellt mit html-webpack-plugin) enthalten ist. Aber aus irgendeinem Grund wird das CSS nicht auf die aktuelle Seite angewendet.CSS wird geladen, aber nicht über Webpack angewendet

Eintrag

entry: { 
    app: [ 
     'react-fastclick', 
     './js/index.js', 
    ], 

    styles: './styles/global.scss' 
}

Regeln

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 
    }), 

    // ... 
]

HTM L Ausgang

<!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>

Quelle

2017-07-25 NealVDV

Mögliches Duplikat von [webpack2: wie man Bootstrap CSS für react-bootstrap importiert, um seine Arten zu finden?] (Https://stackoverflow.com/questions/42436728/webpack2-how-to-import-bootstrap-css-for -react-bootstrap-to-find-its-styles) –

Es hat tatsächlich damit zu tun, dass 'Module' auf' true' gesetzt sind, danke! – NealVDV

die modules aus dem css-loader Entfernen regelte es für mich, es war die Schaffung lokal scoped CSS.

Quelle

2017-07-25 14:43:00 NealVDV

CSS wird geladen, aber nicht über Webpack angewendet

Antwort

Verwandte Themen