使用Webpack 3无法正确加载Sass与Font-Awesome的问题

嘿，我来帮你搞定Webpack 3加载SCSS和Font Awesome的配置问题！先把你提供的现有配置代码整理清楚（你原来的代码有点截断，我补了常见的默认设定，你可以按需修改），再给你说关键的调整点：

const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const precss = require('precss');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: [
    './Scripts/app.ts',
    './Scripts/scss/main.scss',
    //'font-awesome/scss/font-awesome.scss',
    'tether'
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist') // 这里你原代码有截断，我默认设成常用的dist目录，可根据实际修改
  },
  module: {
    rules: [
      // TS文件处理规则（假设你已有基础配置，这里补充完整）
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      // SCSS编译+提取规则
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins: () => [precss, autoprefixer]
              }
            },
            'sass-loader'
          ]
        })
      },
      // 重点！Font Awesome字体文件必须这么处理，不然会加载失败
      {
        test: /\.(woff2?|eot|ttf|otf|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/' // 字体文件会输出到dist/fonts目录，对应CSS里的引用路径
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css'), // 把编译好的CSS单独提取成styles.css
    // 全局引入Tether，避免手动import
    new webpack.ProvidePlugin({
      Tether: 'tether',
      'window.Tether': 'tether'
    })
  ],
  resolve: {
    extensions: ['.ts', '.js'] // 让Webpack自动识别这些后缀的文件
  }
};

关键调整说明： #

• Font Awesome的正确引入：把你注释掉的'font-awesome/scss/font-awesome.scss'取消注释加到entry里，或者更推荐在你的main.scss里写@import '~font-awesome/scss/font-awesome.scss';——这里的~是告诉Webpack去node_modules目录找资源，很重要！
• 字体文件处理：一定要加file-loader（或者用url-loader做小字体转base64）的规则，不然打包后字体文件会丢失，导致图标显示不出来。
• 依赖要装全：别漏了这些必需的包，执行下面的命令安装：

  npm install --save-dev style-loader css-loader sass-loader postcss-loader precss autoprefixer file-loader extract-text-webpack-plugin ts-loader typescript node-sass
  npm install --save font-awesome tether
  

常见坑点排查： #

• 如果图标显示成方块或者报404，检查file-loader的outputPath和CSS里的字体路径是否匹配。比如CSS里生成的是url(../fonts/xxx)，如果你的CSS在dist根目录，字体在dist/fonts，这个路径就没问题。
• 如果SCSS编译报错，大概率是没装node-sass，因为sass-loader依赖它，补上就行。

内容的提问来源于stack exchange，提问作者Terence