JSS approach is getting more and more traction by Sitecore and Front-end developers.

After creating my first JSS Application based on Vue JS Styleguide Template, I notice that the styleguide miss one of my favorites Node modules : node-sass and sass-loader.
This post will show you how to add SASS to your Webpack configuration for the Vue JS Styleguide Template:

1. Install required modules (node-sass, sass-loader) to compile SASS files

yarn add node-sass sass-loader --dev

2. Update the server.vue.config.js to add sass loader.

config.module.rules.push({
      test: /\.html$/,
      exclude: /node_modules/,
      use: { loader: 'html-loader' },
    });
    //Add sass-loader for all scss files here ....
    config.module.rules.push({
      test: /\.scss$/,
      exclude: /node_modules/,
      use: { loader: 'sass-loader' }
    });
    // ignore anything not a .js, .vue, .html, .graphql, or .gql file for server bundling
    // rules are matched in the order in which they're defined, so be sure this rule is defined before any loaders for undesired files, e.g. css, images, etc...
    config.module.rules.unshift({
      test: /\.(?!js|vue|html|graphql|gql$)[^.]+$/,
      exclude: /node_modules/,
      use: {
        loader: 'null-loader',
      },
    });

3. You can also add css-loader

config.module.rules.push({
      test: /\.html$/,
      exclude: /node_modules/,
      use: { loader: 'html-loader' },
    });
    //Add sass-loader for all scss files here ....
    config.module.rules.push({
      test: /\.scss|css$/,
      exclude: /node_modules/,
      use: ['sass-loader', 'css-loader']
    });
    // ignore anything not a .js, .vue, .html, .graphql, or .gql file for server bundling
    // rules are matched in the order in which they're defined, so be sure this rule is defined before any loaders for undesired files, e.g. css, images, etc...
    config.module.rules.unshift({
      test: /\.(?!js|vue|html|graphql|gql$)[^.]+$/,
      exclude: /node_modules/,
      use: {
        loader: 'null-loader',
      },
    });

4. Support for Woff2 TBD