0

I'm using WebPack and now I'm going to need to do the compilation of SASS fiels (we'll be working with Bootstrap). First of all, I installed node-sass and sass-loader (not sure if any of those is needed at all). Then, in my server.js I've added the following line (nothing more that would refer to the Sass object, yet).

import Sass from "node-sass";

The compilation gave me errors that fs package is missing so based on this answer I've tried the following (both individually and simultaneously). The error about fs disappeared but instead there's something about unexpected token in the package.json of the node-sass module.

node: { fs: "empty" },
target: "node",
...

I have no idea what those would do and how those affect anything. Both seem to be produce the same error. Any light on that would be an extra bonus as they appear quite different from each other.

Then, I also tried to enable to the loader in my webpack.config.js by the following addition suggested here. Even tried to map the source like described here. Another post suggests using a different syntax for target specification... Nothing seems to help and finally I got totally confused and gave up.

module: {
  loaders: [
    { test: /\.js$/, loader: "babel", exclude: /node_modules/ },
    { test: /\.scss$/, loader: 'style!css!sass' }
  ]
},
sassLoader: { sourceMap: true },
...

Some of the posts I'm reading are old and I feel that they might be outdated and do more harm than good. And there seems to be quite a few posts not answered that regard the connection between WebPack and SASS (e.g. this and this). I fear that I might be barking up the wrong tree...

I need help being pointed in the right direction.

Community
  • 1
  • 1

1 Answers1

0

There should be no need to write import Sass from "node-sass"; anywhere in your code. The node-sass package is part of your build-pipeline which is using webpack and thus running in a node environment. But your front-end code typically does not have any connection to a node env because it's running in the browser. This also explains why you got errors related to fs. You should also get rid of your node: { fs: "empty" }, target: "node", ... stuff. In a pure front-end related webpack pipeline you shouldn't need those hacks.

Try the following in your webpack.config.js file:

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  }
};

To get things going don't use source-maps from the beginning, but add them once the rest of the setup is running. To get sourcemaps each loader must re-use the result from the previous loader, which is why you should start with having a look how sourcemaps are configured for sass-loader.

dotcs
  • 2,286
  • 1
  • 18
  • 26