当我尝试使用 Parcel 构建在开发模式下运行良好的 React 应用程序的生产版本时，我得到“找不到模块 'sass'”

Question

我已经构建了一个简单的 React/Redux 应用程序，并且正在使用 Parcel 作为捆绑程序。在开发模式下运行良好，即使用脚本

"dev": "parcel ./src/index.html",

但是当我尝试这样做时

"build": "parcel build ./src/index.html",

我收到以下错误

/Users/abc/Documents/Projects/sandbox/smart/src/styles/main.scss: Cannot find module 'sass' from '/Users/abc/Documents/Projects/sandbox/smart/src/styles'
    at /Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:97:35
    at processDirs (/Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:244:39)
    at isdir (/Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:251:32)
    at /Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:23:69
    at FSReqWrap.oncomplete (fs.js:152:21)

这是我第一次尝试使用 Parcel 构建应用程序，但我迷路了。我正在使用node-sass 直接导入我的 sass 文件——也许这与此有关。

引用的文件 (main.scss) 在 App.js 中引用，如下所示

import "../../styles/main.scss";

并且是第一个要包含的 sass 文件（应用程序在 index.js 中像这样加载到 DOM 中：

const store = configureStore()
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
)

这是在节点 11.15 下运行的。我的package.json 如下——任何提示或帮助都非常感谢！

{
  "name": "friender",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "jest": {
    "setupFiles": ["jest-localstorage-mock"]
  },
  "scripts": {
    "dev": "parcel ./src/index.html",
    "build": "parcel build ./src/index.html",
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
    "test": "jest"
  },
  "prettier": {
    "semi": false
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@babel/cli": "^7.6.0",
    "@babel/core": "^7.6.0",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.6.0",
    "@types/jest": "^24.0.18",
    "babel-eslint": "^10.0.3",
    "babel-preset-react": "^7.0.0-beta.3",
    "eslint": "^6.2.2",
    "eslint-config-prettier": "^6.1.0",
    "jest": "^24.9.0",
    "jest-localstorage-mock": "^2.4.0",
    "parcel-bundler": "^1.12.3",
    "prettier": "^1.18.2"
  },
  "dependencies": {
    "@emotion/babel-preset-css-prop": "^10.0.14",
    "@emotion/core": "^10.0.16",
    "@emotion/styled": "^10.0.15",
    "@fortawesome/fontawesome-svg-core": "^1.2.0-7",
    "@fortawesome/free-solid-svg-icons": "^5.11.1",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "axios": "^0.19.0",
    "bulma": "^0.7.5",
    "eslint-plugin-jest": "^22.17.0",
    "eslint-plugin-react": "^7.14.3",
    "immer": "^4.0.0",
    "node-sass": "^4.12.0",
    "prop-types": "^15.7.2",
    "react": "16.x",
    "react-detect-offline": "^2.4.0",
    "react-dom": "^16.9.0",
    "react-fontawesome": "^1.6.1",
    "react-modal": "^3.10.1",
    "react-redux": "^7.1.1",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0"
  }
}

Answer 1

尝试按照documentation for SCSS 和错误Cannot find module 'sass' 使用模块sass 而不是node-sass：

npm install -D sass

文档中提到能够使用node-sass，但node-sass 存在几个活跃的问题。模块 sass 可能有助于解决错误并允许您在应用程序中使用 SCSS。

希望对您有所帮助！