Sass import from node_modules not working

[gustav-vidispine]

Trying to import some scss-files in from the bootstrap node_module in my vue-library, e.g:

<style lang="scss" scoped> @import '~bootstrap/scss/_buttons'; </style>

This is not working, found out it's most likely due to this issue: elycruz/rollup-plugin-sass#38

Wondering if it's possible to get the default sass-config to include the '~' alias by default (to match the app code written with Poi). Everything is working so good it feels bad to add a config-file just for this issue, that's probably pretty common :)

[egoist]

@gustav-vidispine yes sure, we just need to figure out how to add this alias 😄 will take a look later

btw bili is using rollup-plugin-postcss for sass support so you may open an issue there instead: https://github.com/egoist/rollup-plugin-postcss

[gustav-vidispine]

Ohh found egoist/rollup-plugin-postcss#72, that solves the issue with not having to use relative paths.

But guess the ~ alias would be nice for consistency :)

[egoist]

This feature landed in rollup-plugin-postcss@1.3.0, re-install bili and you will receive the updates.

[timothyerwin]

@egoist @gustav-vidispine I'm using bili and trying to import bootstrap. I get the same issue. I haven't been able to solve it using this thread. It seems to work with npm run storybook, but not bili...What specifically do I need to change?

(vue) File to import not found or unreadable: ~bootstrap/scss/bootstrap.

// variables.scss
@import "~bootstrap/scss/bootstrap";

// bili.config.js
const path = require('path');
const vue = require('rollup-plugin-vue');
const postcss = require('rollup-plugin-postcss');

module.exports = {
  plugin: [vue(), postcss({
    extract: true,
    plugins: [require('postcss-easy-import')]
  })],
  format: ['umd'],
  moduleName: '$ux',
  uglifyEs: true,
  exports: 'named',
  externals: ['vue'],
  globals: {
    vue: 'Vue'
  },
}

"devDependencies": {
    "@storybook/vue": "^4.0.0-alpha.0",
    "@vue/test-utils": "^1.0.0-beta.11",
    "babel-core": "^6.26.0",
    "bili": "^3.1.0",
    "bootstrap": "^4.1.1",
    "css-loader": "^0.28.9",
    "eslint": "^4.17.0",
    "eslint-config-standard": "^11.0.0-beta.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-node": "^6.0.0",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.2.2",
    "expect": "^22.1.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "jquery": "^3.3.1",
    "jsdom": "^11.6.2",
    "jsdom-global": "^3.0.2",
    "mocha": "^5.0.0",
    "mocha-webpack": "^1.0.1",
    "node-sass": "^4.9.0",
    "postcss-easy-import": "^3.0.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "rollup-plugin-babel": "^3.0.3",
    "rollup-plugin-buble": "^0.18.0",
    "rollup-plugin-postcss": "^1.6.1",
    "rollup-plugin-vue": "^3.0.0",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.20.1",
    "vue": "^2.5.13",
    "vue-loader": "^14.2.1",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^4.1.0",
    "webpack-merge": "^4.1.1"
  }

[timothyerwin]

I was able to solve it by just using:

@import "node_modules/bootstrap/scss/bootstrap";