I write a react app and tried to dockerized it. after i do this it doesn't compile corectly, it doesn't find "sass" module and this is my error:
Failed to compile.
./src/index.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-
1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-
oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/index.scss)
Cannot find module 'sass'
Require stack:
- /app/node_modules/sass-loader/dist/utils.js
- /app/node_modules/sass-loader/dist/index.js
- /app/node_modules/sass-loader/dist/cjs.js
- /app/node_modules/loader-runner/lib/loadLoader.js
- /app/node_modules/loader-runner/lib/LoaderRunner.js
- /app/node_modules/webpack/lib/NormalModule.js
- /app/node_modules/webpack/lib/NormalModuleFactory.js
- /app/node_modules/webpack/lib/Compiler.js
- /app/node_modules/webpack/lib/webpack.js
- /app/node_modules/react-scripts/scripts/start.js
and this is my dockerfile:
From node:14.16.1-alpine
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts@4.0.3 -g --silent
COPY . ./
CMD ["npm", "start"]
and I don't have docker-compose.
any solution?
I add this line to my docker file but it doesn't work and gets me same Error:
RUN npm install -g sass
To note! node-sass
is deprecated as by now!
Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass .
Instead you can see that Sass is followed on the Dart sass project!
react-scripts already moved that direction!
The used package now is sass ! npm i -g sass
or npm i sass --save-dev
If you go to npm sass
page
This package is a distribution of Dart Sass , compiled to pure JavaScript with no native code or external dependencies. It provides a command-line sass executable and a Node.js API.
You can install Sass globally using
npm install -g sass
which will provide access to the sass executable . You can also add it to your project usingnpm install --save-dev sass
. This provides the executable as well as a library .
Install sass
Globally
npm i -g sass
or
Locally
npm i sass --save-dev
I personally prefer to always go with local installs! So that npm install
will add it automatically! Sometimes too to maintain the versions per project!
And
App compilling and running after install!
If you are running on an old version that require node-sass!
Then you can Update to the latest version! And before that! You may like to remove node_modules
and package-lock.json
.
npm i react-scripts --save
After that npm install
to install again the project dependencies
And you can go for installing sass
step
I solve it: you just need to add this line in to your "dockerfile" so when you build your docker image it should install sass automaticly:
RUN npm install -g sass
and in your "package.json" add this in the "dependencies" that it tells to program what we have in this case we mean we have the specific version of "sass":
"sass": "version number(example:^5.0.0)"
and add this in "scripts" part that tells to program how to work in this case I think it tells that for "scss" files whatch that file and recognize and open it like a "css":
"scss": "sass --whatch scss -o css"
Try install in your terminal this
npm install --save-dev node-sass
and restart your localhost by typing
npm start
Hit Enter on your prompt
After doing these steps make sure to check your dependency go into
package.json
and find
"devDependencies": { "node-sass": "^yourversion" }
npm cache clear --force
npm install sass
To be clear:
1st) try uninstalling it by using this command
npm uninstall node-sass
and then 2nd) try installing sass
npm install --save-dev sass
this worked for me when I was having issues installing sass on a project using create react app
npm install --save-dev node-sass sass-loader style-loader css-loader mini-css-extract-plugin
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.