tutorial - webpack sass-loader no genera un archivo css

webpack sass to css

Question

No puedo entender cómo renderizar un archivo css con el sass-loader de webpack.

Así es como se ve mi 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''
      }

    ],
  }

}

Como puede ver, estoy usando el cargador del módulo sass-loader especificado en la documentación.

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

Mi raíz se ve así:

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

Puedo hacer que todo funcione como html y jsx charlataneros. Simplemente escribo el paquete web en la línea de comandos y las cosas suceden.

Estoy haciendo algo mal con el cargador sass. ¿Qué es? Por favor ayuda.

Answer 1

Está utilizando el cargador de estilos, que, de forma predeterminada, incorpora su CSS en Javascript y lo inyecta en tiempo de ejecución.

Si desea archivos CSS reales en lugar de CSS incrustados en su Javascript, debe usar ExtractTextPlugin .

Una configuración básica sería:

1. Agregar var ExtractTextPlugin = require(''extract-text-webpack-plugin''); al principio de tu archivo de configuración de la Webpack

2. Agregue lo siguiente a su configuración de Webpack:

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

3. Cambie su configuración de cargador SASS a lo siguiente:

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

Lo que hace es extraer todo el CSS que puede encontrar en su paquete en un archivo separado. El nombre se basará en su nombre de punto de entrada, que en su caso dará como resultado javascript.css (desde la parte de entrada de su configuración).

ExtractTextPlugin.extract -loader es utilizado por el complemento para encontrar el CSS en su código y ponerlo en archivos separados. El primer parámetro que le da es el cargador al que debería recurrir si encuentra archivos en un módulo asíncrono, por ejemplo. En general, esto es más o menos siempre style-loader . El segundo parámetro le dice al plugin qué cargadores usar para procesar el CSS, en este caso css-loader y sass-loader , pero también se postcss-loader cosas como postcss-loader .

Puede encontrar más información sobre cómo crear su CSS con Webpack aquí: https://webpack.github.io/docs/stylesheets.html#separate-css-bundle

Answer 2

Usando TypeScript y encontrándome con un problema similar, descubrí que la importación del archivo ''scss'' debe estar en el archivo de índice en el que está comenzando Webpack.

Importe en index.ts en lugar de en un módulo interno.