Исходная карта CSS с использованием плагина Extract Text Plugin/CSS-loader Webpack

Я пытаюсь создать исходную карту css из webpack. Однако в настоящее время созданный файл css.map практически пуст.

{"version":3,"sources":[],"names":[],"mappings":"","file":"si-styles.css","sourceRoot":""}

Я понимаю, что мне нужно добавить что-то похожее на ниже

css-loader?sourceMap

Но я не уверен, как связать это с importLoaders = 1, который у меня сейчас есть в моем webpack.config.js.

const webpack = require('webpack');
const path = require('path');
//post css
var precss       = require('precss');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var postcssImport = require('postcss-import');

module.exports = {

  context: __dirname + '/frontend',
  devtool: 'source-map',
  entry: "./index.js",
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, './static')
},
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      },
      {
        test:   /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', '!css-loader?importLoaders=1!postcss-loader')
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("si-styles.css")
  ],
  // postcss: [
  //             precss,
  //             autoprefixer({ browsers: ['last 2 versions']  })
  // ]
   postcss: function(webpack) {
        return [
            postcssImport({ addDependencyTo: webpack }), // Must be first item in list
            precss,
            autoprefixer({ browsers: ['last 2 versions']  })
        ];
    },

}

person matt-p    schedule 26.05.2016    source источник


Ответы (1)


Я только что нашел пример с правильным способом сделать это. Я использовал '&' для объединения, т.е.

 {
    test:   /\.css$/,
    loader: ExtractTextPlugin.extract('style-loader', '!css-loader?sourceMap&importLoaders=1!postcss-loader')
  }
person matt-p    schedule 26.05.2016
comment
Вы должны принять свой собственный ответ stackoverflow.com/help/self-answer - person Tieme; 15.10.2016