Question

我开始配置我的第一个Webpack v2任务管理器。这是我第一次使用Webpack。

我使用extract-text-webpack-plugin来获取外部CSS文件。

我的问题是我不知道如何为我的SCSS文件设置源图。

有人有解决方案吗？

非常感谢！

这是我的Webpack.config.js文件：

var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WebpackBuildNotifierPlugin = require('webpack-build-notifier');
var path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader','postcss-loader','sass-loader'],
          publicPath: '/dist',
        })
      }
    ]
  },
  devtool: 'source-map',
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Project Demo',
      minify: {
        collapseWhitespace: false
      },
      hash: true,
      template: './src/index.html'
    }),
    new WebpackBuildNotifierPlugin({
      sound: false,
      suppressSuccess: false
    }),
    new BrowserSyncPlugin({
      server: path.resolve(__dirname, 'dist')
      // proxy: {
      //   target: 'http://localhost:3000',
      //   ws: true
      // }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: true,
      options: {
        postcss: [
          autoprefixer({
            browsers: ['last 4 version', 'Explorer >= 10', 'Android >= 4']
          })
        ]
      }
    }),
    new ExtractTextPlugin({
      filename:'app.css',
      disable:false,
      allChunks:true
    })
  ]
}

Answer 1

您需要在sourceMap和sass-loader中启用css-loader，如sass-loader Source maps所示。您的.scss规则如下所示：

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { loader: 'css-loader', options: { sourceMap: true } },
      'postcss-loader',
      { loader: 'sass-loader', options: { sourceMap: true } },
    ],
    publicPath: '/dist',
  })
}

Answer 2

我遇到与OP相同的问题，基于Michael Jungos的建议，我发现以下代码片段已经解决了。基本上我使用了迈克尔提供的片段，但我不得不延长postcss-loader - 行，然后省略了publicPath: '/dist'。

最后我的解决方案如下：

{ test: /\.(scss|css)$/, loader: extractTextPlugin.extract({ fallback: 'style-loader', use: [ {loader: 'css-loader', options: {sourceMap: true}}, {loader: 'postcss-loader', options: {sourceMap: 'inline'}}, {loader: 'sass-loader', options: {sourceMap: true}} ] }) }

使用extract-text-webpack-plugin使SCSS源图在Webpack 2中工作？

2 个答案: