當我嘗試使用 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

嘗試按照SCSS 的文檔和錯誤Cannot find module 'sass'使用模塊sass而不是node-sass ：

npm install -D sass

文檔提到能夠使用node-sass ，但是 node- node-sass有幾個活躍的問題。 模塊sass可能有助於解決錯誤並允許您在應用程序中使用 SCSS。

希望這會有所幫助！