webpack sass-loader che non genera un file css

Question

Non riesco a capire come eseguire il rendering di un file css con il sass-loader del webpack.

Ecco quello che i miei webpackconfig.js assomiglia:

module.exports = { 
    context: __dirname + "/app", 
    entry: { 
    javascript: "./app.js", 
    html: "./index.html" 
    }, 


    output: { 
    filename: "app.js", 
    path: __dirname + "/dist" 
    }, 


    module: { 
    loaders: [ 
     //JAVASCRIPT 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: ["babel-loader"], 
     }, 

     //Index HMTML 
     { 
     test: /\.html$/, 
     loader: "file?name=[name].[ext]", 
     }, 
     //Hotloader 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: ["react-hot", "babel-loader"], 
     }, 

     // SASS 
     { 
     test: /\.scss$/, 
     loader: 'style!css!sass' 
     } 

    ], 
    } 

} 

Come potete vedere sto usando il modulo loader sass-loader specificato nella documentazione.

{ 
    test: /\.scss$/, 
    loader: 'style!css!sass' 
    } 

mia radice appare come tale:

Project Root: 
    app: 
    style.scss 
    dist: 
    ?????? WTF is my css file?? 
    webpack.config.js 

posso ottenere tutto il resto a lavorare come HTML e JSX caricatori Babble. Digito semplicemente webpack nella riga di comando e le cose accadono.

Sto facendo qualcosa di sbagliato con il caricatore sass. Che cos'è? Per favore aiuto.

Answer 1

Si sta utilizzando il caricatore di stili, che, per impostazione predefinita, incorpora il CSS in JavaScript e lo inietta in fase di runtime.

Se si desidera che i file CSS reali anziché CSS siano incorporati nel Javascript, è necessario utilizzare lo ExtractTextPlugin.

Una configurazione di base sarebbe:

1. Aggiungere var ExtractTextPlugin = require('extract-text-webpack-plugin'); alla parte superiore del vostro file di configurazione Webpack.

2. Aggiungi quanto segue al Webpack config:

   plugins: [ 
       new ExtractTextPlugin('[name].css'), 
   ] 
   

3. Cambiare la configurazione SASS loader al seguente:

   { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract(
        'style-loader', // backup loader when not building .css file 
        'css-loader!sass-loader' // loaders to preprocess CSS 
       ) 
   } 
   

Quello che fa è estrarre tutti i CSS che riesce a trovare nel pacchetto in un file separato. Il nome sarà basato sul nome del punto di inserimento, che nel tuo caso avrà come risultato javascript.css (dalla parte di entrata della tua configurazione).

Il plug-in ExtractTextPlugin.extract viene utilizzato dal plug-in per trovare il codice CSS nel codice e inserirlo in file separati. Il primo parametro che fornisci è il loader su cui dovrebbe tornare se rileva dei file in un modulo asincrono, per esempio. Generalmente questo è praticamente sempre style-loader. Il secondo parametro indica al plug-in quali caricatori utilizzare per elaborare il CSS, in questo caso css-loader e sass-loader, ma vengono spesso utilizzate anche cose come postcss-loader.

Maggiori informazioni sulla costruzione del vostro CSS con Webpack può essere trovato qui: https://webpack.github.io/docs/stylesheets.html#separate-css-bundle

Answer 2

Utilizzando dattiloscritto e imbattersi problema simile, ho scoperto che l'importazione di file 'SCSS' dovrebbe essere nel file di indice che Webpack sta iniziando a .

Importare in index.ts anziché in un modulo interno.