React JS 导入 css 文件有表达式 no-unused-expressions

Question

In my React JS app add import a CSS file in component
import("./assets/Base.scss");
When run npm start show this error in command prompt

Line 17:1: Expected an assignment or function call and instead saw an expression no-unused-expressions

Line 17:1 is import("./assets/Base.scss");

I don't want to import css file like below
import './assets/Base.scss';
I want to import with parenthesis .

I had some rules for .eslintrc.js :

"use strict";

const fs = require("fs");
const path = require("path");

const restrictedPaths = [
  { name: "react-bootstrap" },
  { name: "@material-ui/core" }
].map(pkg =>
  fs
    .readdirSync(path.dirname(require.resolve(`${pkg.name}/package.json`)))
    .map(component => ({
      name: `${pkg.name}/${component}`,
      message: `This loads CommonJS version of the package. To fix replace with: import { ${component} } from "${pkg.name}";`
    }))
);

module.exports = {
  extends: "eslint-config-react-app",
  rules: {
    // "no-script-url": "warn",
    "jsx-a11y/anchor-is-valid": "warn",
    "no-restricted-imports": ["error", { paths: [].concat(...restrictedPaths) }]
  }
};

How can I solve this problem?
Is the error displayed for rules in .eslintrc.js ?

Answer 1

You need to write it like this:

import "./assets/Base.scss";

Without the parenthesis