there is an bug on scss import

[yozman]

hey guys,
I installed node-sass, sass-loader to use sass in my project,
but when I try to use primer-markdown, there is an Bug

ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=_v-bb18f99e&scoped=true!./~/sass-loader?indentedSyntax!./~/vue-loader/lib/selector.js?type=style&index=0!./src/components/widget/Article.vue
Module build failed: 
@import "primer-support/index.scss";
^
      File to import not found or unreadable: primer-support/index.scss
Parent style sheet: /Users/yozman/sysc/node_modules/primer-markdown/index.scss
      in /Users/yozman/sysc/node_modules/primer-markdown/index.scss (line 1, column 1)
 @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=_v-bb18f99e&scoped=true!./~/sass-loader?indentedSyntax!./~/vue-loader/lib/selector.js?type=style&index=0!./src/components/widget/Article.vue 4:14-298 13:2-17:4 14:20-304

the code is like

// Article.vue
<template lang="jade">
  div(:class.once="$options.name" v-html="innerHTML")
</template>

<script>
export default {
  data () {
    return {
      innerHTML: ''
    }
  },
  name: 'W__Article',
  props: { args: Object },
  watch: {
    'args.content' (val) {
      let scoped = this.$el.attributes[0].name
      this.innerHTML = val.replace(/(<[^/]+?)([> ])/g, `$1 ${scoped}$2`)
    }
  }
}
</script>

<style lang="sass" scoped>
@import ~primer-markdown/index.scss

.W__Article
  @extend .markdown-body
</style>

// node_modules/primer-markdown/index.scss
@import "primer-support/index.scss";
@import "./lib/markdown-body.scss";
@import "./lib/headings.scss";
@import "./lib/lists.scss";
@import "./lib/tables.scss";
@import "./lib/images.scss";
@import "./lib/code.scss";

when I change it to @import "~primer-support/index.scss" it works.

how can I fix it to works on my project?

[chrisvfritz]

This is not a bug. It's just how css-loader works.

[yozman]

@chrisvfritz
but the source is on package primer-markdown not mine,
primer-markdown require primer-support,
could u tell me what can I do in my project ?

[dousaitis]

You don't need to add the ~ in front of primer-support. You can instruct sass-loader to include all node packages in order to be able to resolve primer-support/index.scss properly.

webpack config:

const path = require('path');
const webpack = require('webpack');
const nodeModulesDirectory = path.resolve(__dirname, './node_modules');

module.exports = {
  .....
  module: {
    loaders: [
       { test: /\.css$/, loader: 'style-loader!css-loader' },
       { test: /\.scss$/, loader: `style-loader!css-loader!sass-loader?includePaths[]=${nodeModulesDirectory}`}
    ]
  }
};