node.js - 当我尝试使用 Parcel 构建在开发模式下运行良好的 React 应用程序的生产版本时,我得到“找不到模块 'sass'”
问题描述
我已经构建了一个简单的 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 文件(应用程序被加载到 DOM 中,如下所示index.js
:
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"
}
}
解决方案
推荐阅读
- angular - 延迟加载模块中空路径上的角度多个命名路由器
- ant-media-server - 蚂蚁传媒社区版中的视频拉伸
- oracle-sqldeveloper - 更改ORACLE SQL 的字体,但显示字仍然很小
- java - Spring Data 延迟初始化角色集合失败,无法初始化代理 - 没有会话
- excel - 通过分隔符从单元格中获取多个子字符串
- api - 查看 Microsoft 动态 crm 报告并使用 API 下载 - 邮递员
- bash - sed: -e 表达式 #1, char 93: 未终止的 `s' 命令
- qemu - 基于 EVE-NG QEMU 的节点未启动
- microsoft-graph-api - Microsoft Graph - 应用未经授权创建 Sharepoint 列表订阅
- azure-blob-storage - 自动生成的块 blob