是否可以在 Webpack 中加载 SASS 而无需捆绑字体但使用源映射？答案

【问题标题】：Is it possible to load SASS in Webpack without bundling fonts BUT with source maps?是否可以在 Webpack 中加载 SASS 而无需捆绑字体但使用源映射？
【发布时间】：2015-12-27 07:17:26
【问题描述】：

我不想捆绑字体和图像，但我需要 sourceMaps 我有这个配置（省略了不相关的部分）：

output: {
   path: './build/',
   publicPath: 'http://localhost:3000/',
   filename: '[name].js'
},

module: {
  loaders: [
    { test: /\.scss$/, loaders: ['style','css?-url,sourceMap', 'sass?sourceMap'] }   
  ]
}

使用此配置，我在 Chrome 中遇到多个错误：

Failed to decode downloaded font: http://localhost:3000/
(index):1 OTS parsing error: invalid version tag

我阅读了很多类似问题的答案和一些解决方案： 1.摆脱'sourceMap' - 它有效，字体正确显示但是......没有sourceMaps 2. 将 publicPath 更改为 URL - 完成了

我找不到任何解决方案，可以让我在捆绑包之外加载字体并让 CSS 与 sourceMaps...

【问题讨论】：

标签： sass webpack

【解决方案1】：

我刚刚想通了。解决方案的关键是 ExtractTextPlugin，它使普通的链接标签而不是“blob”，所有字体都工作得很好，css 是外部的（当它们很大时更好），源映射工作。如果有人感兴趣，这是我的完整配置：

 var path = require('path');
    var webpack = require('webpack')
    var ExtractTextPlugin = require('extract-text-webpack-plugin');

    module.exports = {
        entry: {
            demo: ['./demo/index.ts', 'webpack-dev-server/client?http://localhost:3000'],
            lib: ['./src/js/index.js']
        },
        output: {
            path: './build/',
            publicPath: '/',
            filename: '[name].js'
        },
        debug: true,
        devtool: 'source-map',
        resolve: {
            extensions: ['', '.ts', '.js']
        },
        module: {
            loaders: [
                { test: /\.tsx?$/, loader: 'ts' },
                { test: /\.coffee$/, loader: 'coffee' },
                { test: /\.(png|jpg)$/, loader: 'url' },
                { test: /\.jsx?$/, loader: 'babel', query: { presets: ['es2015'] }, exclude: /node_modules/, },
                { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap') },
                { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap') },
                { test: /\.(ttf|eot|svg|woff(2)?)(\?[\s\S]+)?$/, loader: 'url' }
            ]
        },
        devServer: {
            contentBase: './demo'
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery'
            }),
            new ExtractTextPlugin("[name].css", { allChunks: true })
        ]
    };

【讨论】：