无法将 SASS/SCSS 添加到 Reactjs 项目

Question

我正在尝试将 sass/scss 添加到以下 Reactjs 项目中 本教程：https://medium.com/@Connorelsea/using-sass-with-create-react-app-7125d6913760

我安装了 sass 加载器，但是当我在终端中运行命令 npm run eject 时，它显示 Command not found。我已提交所有更改并将其推送到我的 git 存储库，但仍然无法运行它。

在我的 package.json 中有这行：

"devDependencies": {
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "jquery": "^3.3.1",
    "node-sass": "^4.9.0",
    "react-svg-loader": "^2.1.0",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.3"
  }

在 webpack.config.js 中：

{
   test: /\.sass$/,
   include: paths.appSrc,
   loaders: ["style", "css", "sass"]
}

当我在没有npm run eject 的情况下运行npm start 时，webpack.config.js 出现错误

ReferenceError: paths is not defined

Answer 1

“sass 或 scss”文件的规则应如下所示：

{
  test: /\.(scss|sass)$/,
  loaders: ['style-loader', 'css-loader', 'sass-loader']
}