Почему webpack не может импортировать файлы PrimeReact CSS? - PullRequest
Новая
       35

Почему webpack не может импортировать файлы PrimeReact CSS?

1 голос
/ 25 февраля 2020

Я хотел бы использовать PrimeReact DataTable в моем приложении. Когда я импортирую css файлы: 

import "primereact/resources/themes/nova-light/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";

Выдает эту ошибку: 

ERROR in ./node_modules/primereact/resources/themes/nova-light/theme.css 1:0
Module parse failed: Unexpected character '@' (1: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
> @charset "UTF-8";
| /* open-sans-300 - latin */
| @font-face {
 @ ./src/pages/_app.js 20:0-58
 @ ./src/index.js

ERROR in ./node_modules/primeicons/primeicons.css 1:0
Module parse failed: Unexpected character '@' (1: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: 'PrimeIcons';
|     font-display: auto;
 @ ./src/pages/_app.js 22:0-35
 @ ./src/index.js

ERROR in ./node_modules/primereact/resources/primereact.min.css 1:0
Module parse failed: Unexpected token (1: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

Я настроил webpack.config. js следующим образом: 

var path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        exclude: [
          path.resolve("node_modules/primereact/resources/primereact.css"),
          path.resolve(
            "node_modules/primereact/resources/themes/nova-light/theme.css"
          )
        ],
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader"
        ]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  externals: {
    Config: JSON.stringify(
      process.env.NODE_ENV === "production"
        ? require("./config.prod.json")
        : require("./config.dev.json")
    )
  }
};

Другие ответы на подобные вопросы кажутся устаревшими, поскольку при их выполнении выкидываются и другие ошибки.

Ответы [ 2 ]

1 голос
/ 25 февраля 2020

В этом сообщении было решение: https://github.com/webpack-contrib/sass-loader/issues/344

Мне не хватало этих загрузчиков: 

      {
    test: /\.css$/,
    use: [
      {
        loader: "css-loader"
      }
    ]
  },
  {
    test: /\.(png|gif|woff|woff2|eot|ttf|svg)$/,
    loader: "url-loader?limit=100000"
  },
1 голос
/ 25 февраля 2020

Возможно эта запись может ответить на ваш вопрос. Слишком много, чтобы скопировать весь ответ, и я верю, что если вы сможете получить доступ к этой странице, у вас будет доступ к этому ответу.

Минимальный воспроизводимый ответ

Вам необходимо установить предустановку es2015: 

npm install babel-preset-es2015
and then configure babel-loader:

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}
...