web-dev-qa-db-fra.com

webpack sass-loader ne générant pas de fichier css

Je n'arrive pas à comprendre comment rendre un fichier css avec le webpack sass-loader.

Voici à quoi ressemble mon webpackconfig.js:

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'
      }

    ],
  }

}

Comme vous pouvez le constater, j'utilise le chargeur de module sass-loader spécifié dans la documentation.

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

Ma racine ressemble à ça:

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

Je peux faire fonctionner tout le reste, comme html et jsx babble loaders . Je viens de taper webpack dans la ligne de commande et tout se passe.

Je fais quelque chose de mal avec le chargeur sass. Qu'Est-ce que c'est? S'il vous plaît aider.

sassloaderwebpack
36
PAT-O-MATION

Vous utilisez le chargeur de style qui, par défaut, intègre votre code CSS dans Javascript et l'injecte au moment de l'exécution.

Si vous voulez de vrais fichiers CSS au lieu de CSS intégrés à votre Javascript, vous devez utiliser la variable ExtractTextPlugin.

Une configuration de base serait:

  1. Ajoutez var ExtractTextPlugin = require('extract-text-webpack-plugin'); en haut de votre fichier de configuration Webpack.

  2. Ajoutez les éléments suivants à votre configuration Webpack:

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

  3. Modifiez votre configuration de chargeur SASS comme suit:

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

Cela permet d'extraire tous les CSS qu'il peut trouver dans votre bundle dans un fichier séparé. Le nom sera basé sur votre nom de point d’entrée, ce qui dans votre cas donnera javascript.css (à partir de la partie entrée de votre configuration).

Le ExtractTextPlugin.extract- loader est utilisé par le plugin pour trouver le CSS dans votre code et le placer dans des fichiers séparés. Le premier paramètre que vous lui donnez est le chargeur auquel il doit recourir s'il rencontre des fichiers dans un module async, par exemple. Généralement, il s’agit presque toujours de style-loader. Le deuxième paramètre indique au plug-in quels chargeurs utiliser pour traiter le CSS, dans ce cas, css-loader et sass-loader, mais des éléments comme postcss-loader sont également souvent utilisés.

Vous trouverez plus d’informations sur la construction de votre CSS avec Webpack ici: https://webpack.github.io/docs/stylesheets.html#separate-css-bundle

55
Ambroos

En utilisant TypeScript et en rencontrant un problème similaire, j'ai découvert que l'importation du fichier 'scss' devait se trouver dans le fichier d'index de Webpack.

Importer dans index.ts plutôt que dans un module interne.

0
Dror Weiss