CODEWITHSUNDEEP
reactjssassecmascript-6webpackwebpack-dev-server
Umair Sarfraz
Umair Sarfraz

Reputation: 6069

Sass with react render not working

I am new to react and have been playing around with it. This might be basic so please bear with me on this.

Basically, I have been setting up my environment (React+Babel+webpack). I am currently in the process of using sass with react but I have no idea why this isn't working.

Webpack config

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
    context: path.join(__dirname, "src"),
    devtool: debug ? "inline-sourcemap" : null,
    entry: "./js/client.js",
    module: {
        loaders: [{
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-0'],
                    plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
                }
            },
            { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
            { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
            { test: /\.css$/, loader: "style-loader!css-loader" }, {
                test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                loader: 'file-loader',
            },
            {
                test: /\.scss$/,
               loader: ExtractTextPlugin.extract(
                'style', // backup loader when not building .css file
                'css!sass' // loaders to preprocess CSS
    )
            }
        ]
    },
    output: {
        path: __dirname + "/src/",
        filename: "client.min.js"
    },
   plugins:  [
        new ExtractTextPlugin("styles.css")
       ] 
};

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>React</title>
</head>

<body>
    <div id="example"></div>
    <script src="client.min.js"></script>
</body>

</html>

Client.js/Entry point

import React from "react";
import ReactDOM from "react-dom";
import "./pages/css/bootstrap.min.css"; //Added bootstrap css and it was working fine
import "./pages/client.scss";


const app = document.getElementById('example');

ReactDOM.render(
    <h1 className="hello">Yayyy</h1>,
            example);

client.scss

.hello {
    h1 {
        color: blue;
    }
}

I would appreciate your help and would be happy if am directed towards some good resources to look into as well for starters.

Upvotes: 0

Views: 1320

Answers (1)

Joshua Comeau
Joshua Comeau

Reputation: 2763

I believe I see what's going on!

Webpack normally works by bundling all your modules (be they JS, CSS, whatever) into one big JS file. ExtractTextPlugin, however, exists to bundle something separately, in text format.

This is used when you want to create an external .css file. If you go this route, you'd include a <link rel="stylesheet" href="path/to/file"> in your HTML file.

The more traditional route is to treat the SCSS just like you're treating the CSS. Then, you can just import it in JS :)

Example:

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

I'm far from a webpack expert, but I believe this will solve your problem :)

Upvotes: 1

Related Questions