using vue-loader?inject with scss and webpack 2 fails to find loader

[squirmy]

When using the inject option of the vue-loader in webpack 2 it doesn't get the options that have been passed into it in the webpack configuration.

This part in the vuejs webpack template:

  // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

This is fine for most loaders as they are named the same as the lang option in the single file vue component. However, as you can see above, scss uses the sass loader which causes vue-loader to not find the loader when passing in the inject parameter.

There is a solution here. Where it creates two configurations; one with inject, and one without. This works, but you then hit another problem in that coverage cannot find the source file as it has the query parameter appended to the filename.

Considering I don't even need the styles in my unit tests - this all just seems a bit hard and I'm wondering if it's the correct approach.

[robdsoule]

Also seeing this issue, everything works great unless <style lang="scss"></style> is in the .vue file. It looks like the vue-loader is looking at the defined lang and using that to load the appropriate loader when inject-loader is being used.

The issue with this is that lang="scss" actually needs to use sass-loader, so when it goes to load it can't find scss-loader as that is not a loader available.

Error when tests run:

ERROR in ./~/vue-loader?inject!./src/components/header/Header.vue
Module not found: Error: Can't resolve 'scss-loader' in '....path to project...../src/components/header'
 @ ./~/vue-loader?inject!./src/components/header/Header.vue 6:0-270
 @ ./src/components/header/Header.spec.js
 @ ./src \.spec$
 @ ./test/unit/index.js

Spec

const HeaderInjector = require('!!vue-loader?inject!./Header');
const Header = HeaderInjector({
    '@/services/some.service': ...,
});

Vue file

<template>
    <div>
        <p>Header</p>
    </div>
</template>

<script>
    import SomeService from '@/services/some.service';
    import HeaderLinks from './HeaderLinks';

    export default {
        components: {
            lsHeaderLinks: HeaderLinks,
        },
        data() {
            return {
                links: [],
            };
        },
        methods: {
            testMethod(value) {
                const formattedValue = SomeService.formatValue(value);
                this.links.push(formattedValue);
            },
        },
    };
</script>

<style lang="scss">
</style>

[robdsoule]

@squirmy Leaving a workaround I got working tonight.

To get around this issue what I did was alias scss-loader to sass-loader, in my webpack.test.confg file I added this property:

    module: {
        ...
    },
    devtool: ...,
    // added field here, others given for reference
    resolveLoader: {
        alias: {
            'scss-loader': 'sass-loader',
        },
    },

Hope this helps!

[squirmy]

Thanks @rsoule3, I'll give it a shot.

[StudentWan]

@rsoule3
Still, there seems some problem.

I built my project with the vue-loader guidence.

It says to loading a global settings file, I can do follow:

npm install sass-resources-loader --save-dev

Then add the following webpack rule:

{
  loader: 'sass-resources-loader',
  options: {
    resources: path.resolve(__dirname, '../src/style/_variables.scss')
  }
}

It all works well, but when goes to inject-loader, the global settings file can not be loaded....