Webpack 4 Sourcemap SCSS из скомпилированного CSS - PullRequest
Новая
       8

Webpack 4 Sourcemap SCSS из скомпилированного CSS

0 голосов
/ 27 июня 2018

Просто настраиваю один из моих проектов с помощью веб-пакета, впервые использую его, так что просто разбираюсь в этом.

В основном я получил SCSS, скомпилированный в CSS, но ранее, когда я использовал grunt, была настройка sourcemap, где, если вы проверяете элемент, он показывает вам, из какого файла .scss элемент извлекается, даже если он был скомпилирован в файл CSS.

Вот мой конфиг веб-пакета: 

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  mode: 'development',
  context: __dirname +"/src",
  devtool: 'source-map',
  entry: {
    head: __dirname + "/src/themes/pixellabs/js/head/head.js",
    styles: __dirname + "/src/themes/pixellabs/scss/styles.scss",
    foot: __dirname + "/src/themes/pixellabs/js/foot/foot.js",
  },
  output: {
    path: __dirname + "/src/themes/pixellabs/js/",
    filename: "[name].min.js"
  },
  watchOptions: {
    aggregateTimeout: 300 // The default
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].css',
              outputPath: '../css/'
            }
          },
          {
            loader: 'extract-loader'
          },
          {
            loader: 'imports-loader'
          },
          {
            loader: 'css-loader',
            options: { minimize: true }
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|svg)/,
        use: [
          {loader: "url-loader"}
        ]
      }
    ],
  },
  plugins: debug ? [] : [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),
    new webpack.optimize.UglifyJsPlugin({
      mangle: false,
      sourcemap: true
    }),

  ],
};

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

https://github.com/webpack-contrib/sass-loader#source-maps

module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader", options: {
                    sourceMap: true
                }
            }, {
                loader: "sass-loader", options: {
                    sourceMap: true
                }
            }]
        }]
    }
0 голосов
/ 27 июня 2018

Согласно документации sass-загрузчика: 'вам нужно передать параметр sourceMap в sass-загрузчик и в css-загрузчик.

{ loader: 'css-loader', options: { minimize: true, sourceMap: true } }

https://github.com/webpack-contrib/sass-loader/blob/master/README.md

...