Bonjour,

Je débute avec webpack et je suis actuellement entrain d'essayer de me créer une config pour gérer de futurs projets.
Je souhaite utiliser Sass et à ce titre j'ai fait appel aux loaders/ modules nécessaires.

CI joint mon webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  entry: './src/javascript/app.js',

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },

  devtool: 'eval-cheap-module-source-map',

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              sourceMap : true
            }
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images',
            },
          },
        ],
      },
      {
        test: /\.(woff|woff2|ttf|otf|eot)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'fonts',
            },
          },
        ],
      },
    ],
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
    new HtmlWebpackPlugin({
      title: 'Accueil',
      template: 'src/html/index.html',
    }),
    new HtmlWebpackPlugin({
      title: 'La suite',
      filename: 'suite.html',
      template: 'src/html/perso.html',
    }),
  ],

  mode: 'development',
  watch: true,
}

CI joint mon package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "description": " ",
  "main": "app.js",
  "scripts": {
    "dev": "webpack --config webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config prod.config.js"
  },
  "author": " ",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "autoprefixer": "^9.8.0",
    "babel-loader": "^8.1.0",
    "cross-env": "^7.0.2",
    "css-loader": "^3.5.3",
    "cssnano": "^4.1.10",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.14.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "browserslist": [
    "last 4 versions"
  ]
}

J'utilise Sass avec une organisation en module (type main.scss avec les @import "./base/typography/typeIndex")

Néanmoins il y a un souci que je n'arrive pas à régler : dans l'inspecteur quand je regarde les sourcesmaps de mon CSS, il m'indique la source du fichier CSS généré par Webpack. Hors je souhaiterai que l'inspecteur m'indique le fichier SCSS.

Il s'agit d'un souci avec les loaders certainement mais pour autant ils ont tous leur sourceMap en "true".
Qu'est ce que j'ai raté ?

Aucune réponse