Webpack: Using/Configuring SASS

[Quadriphobs1]

I have been trying to configure a new app i just created to import/use sass files, i have installed sass-loader, vue-style-loaders and i have in my webpack configuration as

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")

const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});



module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },

  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          vueLoaderConfig,
          extractCSS: true,
          loaders: {
            scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
          }
        }
      },

      {
        test: /\.css$/,
        // important: use vue-style-loader instead of style-loader
        loader:  ['vue-style-loader', 'css-loader']
      },
      {
        test: /\.scss$/,
        use: extractSass.extract({
          use: [
            {
              loader: "css-loader"
            },
            {
                            loader: 'postcss-loader'
                    },
            {
                loader: "sass-loader"
            }
          ],
          // use style-loader in development
          fallback: "style-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ filename: 'common.[chunkhash].css' }),
    extractSass
  ]

and each time i import my scss file such from main.js using import '@/assets/sass/app.scss' i keep getting error

This dependency was not found:

* @/app.scss in ./src/main.js

To install it, you can run: npm install --save @/app.scss

and i have the file in the src folder

what could i been doing wrong?

[tifrel]

Although I had a different error, I just fixed my Vue/SASS issues by running

npm i sass-loader
npm i node-sass

However since I guess these issues are related, I would suggest to the curators to take a look at this issue. In my case the issue presented as follows:

% npm run dev

> [email protected] dev /path/to/project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 94% asset optimization

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                              
12:48:08 PM

This dependency was not found:

* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-
compiler/index?{"vue":true,"id":"data-v-0eaeaf66","scoped":false,"hasInlineConfig":false}!sass-loader?
{"indentedSyntax":true,"sourceMap":true}!../../node_modules/vue-loader/lib/selector?
type=styles&index=0!./modal.vue in ./src/components/modal.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader?
{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-
0eaeaf66","scoped":false,"hasInlineConfig":false}!sass-loader?{"indentedSyntax":true,"sourceMap"
:true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./modal.vue
^C\\

% npm i vue-style-loader
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]
(node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]:
wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ [email protected]
updated 1 package in 10.387s
% npm i sass-loader
npm WARN [email protected] requires a peer of node-sass@^4.0.0 but none is installed. You must
install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]
(node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]:
wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ [email protected]
added 9 packages in 11.31s
% npm i node-sass

> [email protected] install /home/tfr/Code/project_name/node_modules/node-sass
> node scripts/install.js

Cached binary found at /home/tfr/.npm/node-sass/4.7.2/linux-x64-59_binding.node

> [email protected] postinstall /home/tfr/Code/project_name/node_modules/node-sass
> node scripts/build.js

Binary found at /home/tfr/Code/tfr-vue-lib/node_modules/node-sass/vendor/linux-x64-59/binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]
(node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]:
wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ [email protected]
added 105 packages in 14.104s

Now I can npm run dev without issues.