SASS not rendering in React / Webpack project

Question

I added SASS to my project because I like using SASS for my CSS. In my app folder I made CSS folder and a SCSS folder. I run sass --watch scss:css to map over my scss changes to the css folder. This is working great, I think. In my webpack I added a loader to handle SCSS and SASS and added the files need to my package.json. In order to start using the SASS styles do I need to include them in my index.html file or do I need to import them into each component I want to use them with the new es6 import x from 'xpath' thing?

Here are my package.json and webpack.config.js files

{
  "name": "newaccount",
  "version": "1.0.0",
  "description": "a form submission for new accounts",
  "main": "App.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "---",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-hot-loader": "^1.3.1",
    "react-router": "^3.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.1",
    "html-webpack-plugin": "^2.24.1",
    "node-sass": "^3.13.0",
    "sass": "^0.5.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }
}

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/App.js'
  ],
  output: {
    path: __dirname + '/public',
    filename: "index_bundle.js"
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
       inline:true,
       contentBase: './public',
       port: 3333
     },
  module: {
    loaders: [{ 
         test: /\.js$/, 
         exclude: /node_modules/, 
         loader: "babel-loader"
      }, {
          test: /\.scss$/,
          include: path.join(__dirname, "app"),
          loaders: ["style", "css", "sass"]
        },
        {
              test: /\.scss$/,
              loader: 'style!css!sass'
            }]
  }
};

My file structure is basically an app folder and a public folder. Inside app you have components / containers / css / scss / utils and inside public is jus the bundle.js and index.html files.

Andy Ray · Accepted Answer · 2016-12-10 00:07:17Z

1

You should not be using an external Sass command with Webpack. You need to put the Sass content in Webpack's dependency graph. To do this, tell Webpack you are using the files, which is done with require(). At the top of your Javascript file for the page needing the style, add

require('./path/to/sass/scss')

In development mode, this will turn your Sass code into Javascript that will inject the built CSS rules into the page. It's strange I know, but it gives you hot reloading of styles. You should also have a separate production build Webpack config using the ExtractTextPlugin to pull the built CSS out into a separate file, and load that file in your production HTML.

Further reading: Webpack: When to Use and Why.

answered Dec 10, 2016 at 0:07

Andy Ray

32.3k16 gold badges114 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user3622460 Over a year ago

So the entire scss application map to css is not needed? I just write sass files and at the top of the react component .js file I want to use I include the sass file? Like import sassBase from '../app/scss/base/_base.scss' or just require('../app/scss/base/_base.scss')

user3622460 Over a year ago

Pretty good Webpack guide you made, didn't know bundling images as well.

Andy Ray Over a year ago

Correct. Webpack should know about all your static assets that your app needs to run. It gives you the safety and guarantee that all files your app needs will load. Same way that calling require() on a Javascript file that doesn't exist will error and fail your build, now you get the same benefit for images,css,fonts,etc.

user3622460 Over a year ago

If I try to access the scss file directory from my component I get a pretty nasty error when building ERROR in ./~/css-loader!./~/sass-loader!./~/style-loader!./~/css-loader!./~/sass-loader!./app/scss/base/_base.scss Module build failed: ^ Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in /Users/sam/Desktop/project/newAccount/app/scss/base/_base.scss (line 1, column 1) @ ./app/scss/base/_base.scss 4:14-263

Andy Ray Over a year ago

Does your sass file you're requiring contain the code var content=... ? That's not valid sass

|

user3622460 · Accepted Answer · 2016-12-10 00:57:26Z

0

My webpack.config.js file was loading scss and sass twice, changed it to

{
     test: /\.scss$/,
     loader: 'style!css!sass'
}]

by removing

{
     test: /\.scss$/,
     include: path.join(__dirname, "app"),
     loaders: ["style", "css", "sass"]
 },

Now I can include my SASS files in my react components. Now I need to figure out how to access my images inside of my SASS files - seems to toss mass errors =(

answered Dec 10, 2016 at 0:57

user3622460

1,2515 gold badges24 silver badges43 bronze badges

1 Comment

Andy Ray Over a year ago

Images should be loaded the same way as requiring any file, with a local path, but use url instead of require. background-image: url(./local/path.jpg)

Collectives™ on Stack Overflow

SASS not rendering in React / Webpack project

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related