Sass doesn't get compiled

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]')
    }
  }
]
}
}

You want to use `scss` into the VueJS Single File Components ? — Belmin Bedak, Apr 03 '17 at 08:21

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

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.

score -1 · Answer 2 · answered Apr 03 '17 at 12:51

-1

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

answered Apr 03 '17 at 12:51

Fleeck

1,036
2
8
21

Sass doesn't get compiled

2 Answers2