Properly integrate Sass with Vue-loader webpack stack

Question

I'm new to this stack and still learning the intricacies of using webpack with vue so I downloaded a bootstrap example app to get me started. My first need was to apply sass as this example doesn't have it but I'm at a loss.

First of all the config stuff for webpack is pretty confusing. Rather than the usual webpack config file it seems there is a directory for config and also a build directory that seem to handle all this.

I'm guessing but the only file that seems to really apply to any walkthrough ive seen on adding sass to the stack is webpack.base.conf.js:

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
 },
 output: {
 path: config.build.assetsRoot,
 filename: '[name].js',
 publicPath: process.env.NODE_ENV === 'production'
   ? config.build.assetsPublicPath
   : config.dev.assetsPublicPath
 },
 resolve: {
   extensions: ['.js', '.vue', '.json'],
   alias: {
     'vue$': 'vue/dist/vue.esm.js',
     '@': resolve('src'),
  }
 },
module: {
  rules: [
  ...(config.dev.useEslint ? [createLintingRule()] : []),
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
  },
  {
      test: /\.scss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            indentedSyntax: true
          }
        }
      ]
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('media/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  }
  ]
},
node: {
  // prevent webpack from injecting useless setImmediate polyfill 
 because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}

As you can see in the rules I attempted to add what the walkthrough says and then called the import on the App.vue file:

<style lang="scss" scoped>
 @import 'assets/sass/main.scss'
</style>

The site loads up without and seems to be able to locate the sass file but i dont see the styles loaded anymore nor any indication that its compiling when I edit or even do a rebuild.

Please help, the webpack and vue loader architecture seems really confusing.

Answer 1

Turns out I was targeting body from within the sass file and since vue-loader is instantiated on a div, you can't target parent elements from sass mounted in this way. By targeting #app instead the styling worked!