SCSS files import doesn't work.

[manodupont]

I modified a bit of whats already in there.

So i wanted to simply add scss import file. SO i used differentes style-loader.

So my config goes as this :

webpack.client.js

var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    target:  "web",
    cache:   false,
    context: __dirname,
    debug:   false,
    devtool: false,
    entry:   ["../src/client"],
    output:  {
        path:          path.join(__dirname, "../static/dist"),
        filename:      "client.js",
        chunkFilename: "[name].[id].js"
    },
    plugins: [
        new ExtractTextPlugin('[name].css', {allChunks: true}),
        new webpack.DefinePlugin({__CLIENT__: true, __SERVER__: false, __PRODUCTION__: false, __DEV__: true}),
        new webpack.DefinePlugin({"process.env": {NODE_ENV: '"development"'}}),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}),
    ],
    module:  {
        loaders: [
            {
                test: /\.json$/,
                loaders: ["json"]
            },
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
            }, // use ! to chain loaders
            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            }, // use ! to chain loaders
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192'
            }
        ],
        postLoaders: [
            {
                test: /\.js$/,
                loaders: ["babel?presets[]=es2015&presets[]=stage-0&presets[]=react"],
                exclude: /node_modules/}
        ],
        noParse: /\.min\.js/
    },
    resolve: {
        modulesDirectories: [
            "src",
            "node_modules",
            "web_modules"
        ],
        extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json'],
    },
    node:    {
        __dirname: true,
        fs:        'empty'
    }
};

webpack.server.js

var webpack = require("webpack");
var path = require("path");
var fs = require('fs');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var nodeModules = {};

fs.readdirSync('node_modules')
    .filter(function (x) {
        return ['.bin'].indexOf(x) === -1;
    })
    .forEach(function (mod) {
        nodeModules[mod] = 'commonjs ' + mod;
    });

module.exports = {
    target: "node",
    cache: false,
    context: __dirname,
    debug: false,
    devtool: "source-map",
    entry: ["../src/server"],
    output: {
        path: path.join(__dirname, "../dist"),
        filename: "server.js"
    },
    plugins: [
        new webpack.DefinePlugin({__CLIENT__: false, __SERVER__: true, __PRODUCTION__: false, __DEV__: true}),
        new webpack.DefinePlugin({"process.env": {NODE_ENV: '"production"'}}),
        new ExtractTextPlugin('[name].css', {allChunks: true}),
    ],
    module: {
        loaders: [
            {
                test: /\.json$/,
                loaders: ["json"]
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style-loader',
                'css-loader?sourceMap!sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true')
            }
        ],
        postLoaders: [
            {
                test: /\.js$/,
                loaders: ["babel?presets[]=es2015&presets[]=stage-0&presets[]=react"],
                exclude: /node_modules/
            }
        ],
        noParse: /\.min\.js/
    },
    externals: nodeModules,
    resolve: {
        modulesDirectories: [
            "src",
            "node_modules",
            "web_modules"
        ],
        extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json'],
    },
    node: {
        __dirname: true,
        fs: 'empty'
    }
};

test.jsx

import React from "react";
import s from "./Empty.scss";

/**
 * Main React application entry-point for both the server and client.
 */
class Empty extends React.Component {

    /**
     * Runs on server and client.
     */
    render () {

        return (
            <div className="{s.test}" id="test2">
                Allo
            </div>
        );
    }
}

Empty.scss

.test {
     border: 1px;
}

Those two configs gave me for each scss files i have in ./src, a corresponding scssJS file.

My questions are

1 - How can I just want to see in my console source files(i.e Chrome Dev Tools), my scss sources files instead of those JS files that "serves" my scss.
2 - Why the HTML thats being renderer doesn't contain the class as per the JSX just written up above.

[manodupont]

To be clearer, the html output is

<div id="test2">
                Allo
            </div>

[RickWong]

Not sure if this solves anything, but: ="{s.test}" should be without quotes I think.

[thehashrocket]

did you get it working @manodupont ? I attempted the same thing but get:

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example