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

[sandangel]

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

[tomtobac]

Hi @sandangel, how did you solve it?

[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'
  })
]

[cahyowhy]

mine is doesnt work :(

import vue from 'rollup-plugin-vue';
import typescript from 'rollup-plugin-typescript';
import scss from 'rollup-plugin-scss';
import commonjs from 'rollup-plugin-commonjs';
import {terser} from "rollup-plugin-terser";
import tildeImporter from 'node-sass-tilde-importer';

export default {
  input: 'src/main.ts',
  output: {
    format: 'esm',
    file: 'dist/main.js',
    globals: {
      'vue': 'Vue',
      'vue-class-component ': 'vueClassComponent',
      'query-string': 'queryString'
    },
  },
  external: ['vue'],
  plugins: [
    vue(),
    scss({
      "includePaths": [
        './node_modules'
      ],
      "importer": tildeImporter,
      "output": 'dist/main.css'
    }),
    typescript(),
    commonjs(),
    terser()
  ]
}

[naoisegolden]

+1

It'd be great if @import "~alias" worked out of the bow with this plugin.

[thgh]

Have you tried with @rollup/plugin-alias ?

[naoisegolden]

@rollup/plugin-alias works for JS aliases but doesn't resolve SCSS aliases.

[datnguyen-nfq]

I still meet this issue so far ? Any suggest ?

[aMarCruz]

@datnguyen-nfq , I'm using this simple importer:

import { resolve } from 'path'
import sass from 'sass'

const importer = (url, _prev, done) => {
  if (url[0] !== '~') {
    return null
  }
  const info = { file: resolve(`node_modules/${url.substr(1)}`) }
  if (done) {
    done(info)
  }
  return info
}

// Then, in the plugins section:
//  ...
//    scss({
//      importer,
//      sass,
//    }),