Я создал простое приложение 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"
}
}