title: Why webpack cant import PrimeReact CSS Files?
body: <p>I would like to use PrimeReact DataTable on my app. When I import the css files:</p>
  
  <pre><code>import "primereact/resources/themes/nova-light/theme.css";
  import "primereact/resources/primereact.min.css";
  import "primeicons/primeicons.css";
  </code></pre>
  
  <p>It throws this error:</p>
  
  <pre><code>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
  &gt; @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
  &gt; @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
  </code></pre>
  
  <p>I have adjusted the webpack.config.js like this:</p>
  
  <pre><code>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")
      )
    }
  };
  </code></pre>
  
  <p>Other answers to similar questions seem outdated, since by doing them, other errors or the same are thrown.</p>
  
  <ul>
  <li><a href="https://forum.primefaces.org/viewtopic.php?t=52134" rel="nofollow noreferrer">https://forum.primefaces.org/viewtopic.php?t=52134</a></li>
  </ul>