Sass doesn't get compiled - sass

Question

My scss files are not getting compiled. It doesn't understand what I do with my code. I want to be able to use Sass instead of CSS but I can't find the right way to compile Sass.
I am using the webpack template with Vue.js
My webpack config file looks like this:
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
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: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.scss$/,
use: [ 'style-loader','css-loader','sass-loader' ],
loaders: ['style', 'css', 'sass']
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}

Answer 1

One way of doing it is to have a single scss file as an entry. This is where all your different scss file gets imported. Something like this. Then you import that scss file in source code of your js entry file (in this case ./src/main.js). So when webpack reads your main.js it will see import './myscssfile.scss' and looks for a loader (or I think it does). Here is how I do my scss module in webpack2:
module: {
rules: [
// my js stuff
{ test: /\.js$/, enforce: 'pre', loader: 'eslint-loader', exclude: /node_modules/ },
// my scss stuff
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 2,
sourceMap: true,
localIdentName: '[local]___[hash:base64:5]'
}
},
{
loader: 'autoprefixer-loader',
options: {
browsers: 'last 2 version'
}
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true
}
}
]
}
]
}
I hope it works.

Answer 2

Just use <style lang="sass"></style in your component. Let me know if it helps.