0

I tried to use webpack for sass (compilation to outer file. Not a direct includind sass to some js files). It doesn't work somehow, so from the output I'll receive bundle.js and that's all, but I want to have outer style.css

I don't know what I'm doing wrong. Could someone help me please?

I checked a few relative topic but didn't find any useful advices.

Here is my webpack conf

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

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style', 'raw!sass')
            }
        ]
    },
    plugins: [
    new ExtractTextPlugin('style.css', {
        allChunks: true
    })
    ]
};

zeta.scss

@import "hamma";

html {
    color: red;

    &.blue {

        color: black;

    }
}

hamma.scss

html {
color: purple !important;
}

file structure is very simple

entry.js
zeta.scss
hamma.scss
webpack.config.
package.json

my package.json

{
  "name": "dsfsdfdsfds",
  "version": "1.0.0",
  "main": "entry.js",
  "scripts": {
    "test": "sdf"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "css-loader": "^0.26.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "node-sass": "^3.13.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3"
  }
}
Velidan
  • 5,526
  • 10
  • 48
  • 86

1 Answers1

0

So, the answer is: require("./stylesheet.css") into your js file.

It looks wierd but, actually, for me webpack doesn't compile sass files without this (like gulp/grunt/broccoli).

The webpack woun't parse your scss/css/style/less files till you include it into some of your js files.

Velidan
  • 5,526
  • 10
  • 48
  • 86