I'm trying to add sass/scss support to create-react-app.
So I did these steps:
npm eject
npm install sass-loader node-sass --save-dev
Opned the webpack.config.dev.js file and added this to loaders section:
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
In my app.js file i reference an scss file: import './css/app.scss';
When i run npm start
everything compiles with no errors but the application loads with no styling.
What am i missing?
Koala is a sass, less etc.. compiler. You can use any tools of your choice for this.
Add the source folder containing all your SCSS files to Koala. It will monitor for any modification to your Sass files and generate the compiled CSS version instantly.
Use the CSS file generated by Koala directly your project.
import './style.css';
I just went through this, and seems that there are lot of people lost or not finding the right answer. This is what I did:
npm run eject
Running this command will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project, as you noted all that was inside a npm module called react-script. Do not modify this package directly!
npm install sass-loader node-sass --save-dev
At this point you have to install the sass compiler and the webpack loader as development dependencies.
config\webpack.config.dev.js
.Add /\.scss$/,
to the exclude array in the url loader, it will look something like this after the update:
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.svg$/,
/\.scss$/, //Add this line
],
Add the SASS/SCSS loader:
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
},
I was stuck with the same problem reading it's documentations.
Unitl I found that the README.md file inside the created project with create-react-app has documented it in another way and it worked. I think relying on that readme file ( that is shipped with your created project ) is better option.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With