[Question] How to make @import "~bootstrap/scss/bootstrap" work?

In main.js I have import a style.scss file, and in style.scss, I use @import “~bootstrap/scss/bootstrap” like I often do with webpack but rollup doesnot understand ~ sign is node_modules folder this is my rollup.config.js

import alias from 'rollup-plugin-alias'
import vue from 'rollup-plugin-vue'
import buble from 'rollup-plugin-buble'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import nodeGlobals from 'rollup-plugin-node-globals'
import butternut from 'rollup-plugin-butternut'
import livereload from 'rollup-plugin-livereload'
import serve from 'rollup-plugin-serve'
import scss from 'rollup-plugin-scss'

const plugins = [
  alias({
    vue$: 'vue/dist/vue.common.js'
  }),
  vue({
    autoStyles: false,
    styleToImports: true
  }),
  scss({
    output: 'public/assets/css/app.css',
    includePaths: [
      './node_modules'
    ]
  }),
  buble({
    objectAssign: 'Object.assign'
  }),
  nodeResolve({
    jsnext: true,
    main: true,
    browser: true
  }),
  commonjs(),
  nodeGlobals()
]

const config = {
  input: './src/main.js',
  output: {
    file: './public/assets/js/app.js',
    format: 'es'
  },
  sourcemap: 'inline',
  plugins: plugins
}

const isProduction = process.env.NODE_ENV === `production`
const isDevelopment = process.env.NODE_ENV === `development`

if (isProduction) {
  config.sourceMap = false
  config.plugins.push(butternut())
}

if (isDevelopment) {
  config.plugins.push(livereload())
  config.plugins.push(serve({
    contentBase: './public/',
    port: 8080,
    open: true
  }))
}

export default config

[datnguyen-nfq]

I still meet this issue so far ? Any suggest ?

[OLmitch]

I’ve run into this exact same issue. Can rollup-plugin-scss support the ~ or not?

Update: Tilde’s seem to load properly when I use the node-sass-tilde-importer:

import tildeImporter from 'node-sass-tilde-importer';

plugins: [
  scss({
    importer: tildeImporter,
    output: 'dist/styles.css'
  })
]