mini-css-extract-plugin 抛出模块解析失败：css 文件中 @font-face 出现意外字符“@”错误

Question

我正在使用mini-css-extract-plugin 和这样的 Webpack 4：

module: {
        rules: [
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('webfonts/[name].[hash:7].[ext]')
    }
  }
},
            {
                test: /\.css?$/,
                use: [
                    'css-loader',
                  {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        sourceMap: !isProduction,
                        // only enable hot in development
                        hmr: !isProduction,
                        // if hmr does not work, this is a forceful method.
                        reloadAll: true,
                    },
                  },

                ]
              },

由于某种原因，由于在我的 css 文件中导入了 @font-face，我收到了一个错误。错误是这样的：

ERROR in ./src/assets/css/site.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '@' (77:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| @font-face { font-family: "MySans"; font-style: normal; font-weight: 800; src: local('☺'),

为什么 mini-css-extract-plugin 在@font-face 上跳闸，有解决办法吗？

Answer 1

请切换您的加载程序顺序，底部应为“css-loader”

{
    test: /\.css$/,
    loaders: ['ThirdLoader', 'secondLoader', 'firstLoader']
}