Javascript Girl
  1. Javascript Girl
  3. Webpack sass où est le fichier css
Intereting Posts
Highcharts – Gantt Chart plot issue Pourquoi la fonction est-elle entre parenthèse? Set cookie avec JS, lu avec le problème PHP Supprimer les espaces avant et arrière dans les clés et valeurs d'objet Inter Frame SOP – Chrome Extension Possibilité d'extraire des fonctions à partir d'un fichier javascript? Utilisation de l'opérateur ternaire avec concaténation de chaîne Bootstrap modal 'chargé' sur un fragment distant Comment puis-je télécharger des images sur facebook? Comment démarrer avec HashLocationStrategy dans Angular 2 RC5 JavaScript – Est-il possible d'afficher tous les délais d'attente actuellement programmés? Essayer de travailler avec AJAX et PHP Remplacer le texte par un lien avec l'extension chrome Comment obtenir l'identifiant de session du client socket.io dans le client Comment utiliser PHP variable en Javascript?

Webpack sass où est le fichier css

J'utilise le pack web avec sass loader comme ceci: 

module.exports = { module: { loaders: [ { test: /\.scss$/, loader: "style!css!sass" } ] } };

Mais je vois que les styles s'appliquent à la balise de style, où est le fichier css de génération?

Par défaut, le style-loader inclut le css compilé dans votre paquet, qui a ajouté à la tête de la page avec le fichier de sortie, par exemple bundle.js . En utilisant le plugin extra-text-webpack, vous pouvez supprimer le css compilé du lot et l'exporter vers un fichier séparé.

Premièrement, enveloppez votre chargeur dans le plugin: 

  loaders: [{ test: /\.scss$/, loader: ExtractTextPlugin.extract( "style", "css!sass") }] },

Ensuite, dites au plugin comment appeler le fichier qu'il génère: 

 plugins: [ new ExtractTextPlugin("app.css") ]

Incluez ce fichier dans votre code HTML normalement.

Si vous voulez un fichier CSS distinct lors de l'utilisation de Webpack, vous devez utiliser le plug-in extra-text-webpack .