mini- css -extract-plugin throws Ошибка разбора модуля: непредвиденная ошибка символа @ в @ font-face в файле css - PullRequest
Новая
       71

mini- css -extract-plugin throws Ошибка разбора модуля: непредвиденная ошибка символа @ в @ font-face в файле css

0 голосов
/ 03 мая 2020

Я использую 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,
                    },
                  },

                ]
              },

По какой-то причине я получаю ошибку из-за импорта @font-face в моем файле css. Ошибка выглядит следующим образом: 

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 и есть ли исправление?

1 Ответ

1 голос
/ 03 мая 2020

Переключите порядок загрузки, пожалуйста, внизу должен быть css -loader 

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