CODEWITHSUNDEEP
cssreactjssasswebpacksass-loader
Felice
Felice

Reputation: 581

Can't figure out sass loader for webpack and ReactJS

I am trying to use .scss for my stylesheets in my ReactJS app. I have a webpack config file with css-loader , sass-loader, and style-loader.

I was able to import css into my app.js file with import './test.css' however i've had no luck with import './test.scss'?

Here's my package.json:

  "dependencies": {
    "react": "^15.0.2",
    "react-dom": "^15.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.7.7",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.3.0",
    "checkbox.css": "^1.1.1",
    "css-loader": "^0.23.1",
    "eslint": "^2.9.0",
    "eslint-plugin-react": "^5.0.1",
    "html-webpack-plugin": "^2.16.1",
    "node-sass": "^3.7.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1"
  }

My webpack: 

  module:{
    loaders:[
      {test:/\.js$/,exclude: /node_modules/, loader: 'babel-loader'},
      {test:/\.scss$/, loaders:['style','css','sass']},
      // {test:/\.css$/, loader: 'style!css', exclude: /node_modules/},
      {test:/\.html$/, loader: 'raw-loader'}
    ]
  },

****The 3rd line is commented out because I figured out how to load css.**

in my app.js

I've tried require("!style!css!sass!./styles.scss"); and have also tried import './styles.scss' with no success.

Currently my error is Uncaught Error: Cannot find module "./../../node_modules/css-loader/lib/css-base.js"

Upvotes: 1

Views: 5329

Answers (4)

ghsamm
ghsamm

Reputation: 76

Try changing your scss files extensions to sass. Apparently, sass-loader would figure out the style you want to use from the file extension. That's how i managed to fix it. Alternatively, use indentedSyntax option for sass-loader :

loaders: ['style', 'css', 'sass?indentedSyntax']

Upvotes: 0

Felice
Felice

Reputation: 581

I figured out the error.

In my app.js I had to write import '!style!css!sass!./test.scss' instead of import './test.scss'. This cleared up the error, which was very confusing because for css files I could just write import './test.css without the use of !css! prepended.

Upvotes: 0

Grgur
Grgur

Reputation: 7392

Your config looks ok, but the error suggests there's an issue with the css loader package. I would try reinstalling it with npm i css-loader just in case.

You would import scss with import './file.scss', no additional loader settings needed via require.

If that won't work, feel free to ping me with a sample git repo that i can clone and run.

Upvotes: 1

QoP
QoP

Reputation: 28397

Your webpack config is okay but you are missing node-sass library in order to be able to use sass-loader as you can see in the sass-loader documentation.

To fix it, install the library

npm install node-sass --save-dev

Upvotes: 6

Related Questions