Skip to content
This repository has been archived by the owner. It is now read-only.

How to resolve css / scss paths ? #49

DavidBabel opened this issue Mar 20, 2019 · 10 comments


Copy link

@DavidBabel DavidBabel commented Mar 20, 2019

Hey guys,

First i'd like to thank you for your amazing plugin. alias are so good !
I wonder if there is a way to resolve css or scss aliases too ?

I tried :

  // rollup config
    resolve: ['.tsx', '.ts', '.scss'],
    common: './common'

  // my code contains : 
  import 'common/scss/init.scss';

But i got this error :

Error: Could not load /example/common/scss/init.scss.js (imported by /example/index.tsx): ENOENT: no such file or directory, open '/example/common/scss/init.scss.js'

This comment has been minimized.

Copy link

@XindaSayHi XindaSayHi commented Mar 21, 2019


I have encountered the same problem as you. Do you have a solution?


This comment has been minimized.

Copy link

@DavidBabel DavidBabel commented Mar 21, 2019

For now, no. I did not find time to check into the lib, but my guess is that requires code changes.

@DavidBabel DavidBabel changed the title How to resolve css path ? How to resolve css / scss paths ? Mar 21, 2019

This comment has been minimized.

Copy link

@demsking demsking commented Apr 14, 2019

Any update for this issue?


This comment was marked as off-topic.

Copy link

@DavidBabel DavidBabel commented May 13, 2019

seems unmaintained


This comment has been minimized.

Copy link

@kuoruan kuoruan commented May 24, 2019

I fixed this by add an empty string to resolve.

    resolve: ["", ".js"],
    "@": resolve("src")

This comment has been minimized.

Copy link

@aseem2625 aseem2625 commented Jun 8, 2019

I'm using

import includePaths from 'rollup-plugin-includepaths';

/* For resolving from base paths */
const includePathOptions = {
  include: {},
  paths: ['src', 'src/components/', 'src/assets/', 'src/styles'],
  external: [],
  extensions: ['.js', '.svg', '.styl', '.css']

// rollup plugin

// In some .styl file
@import 'base/_vars' // base is inside 'styles/' works.

It should work for sass too.


This comment has been minimized.

Copy link

@Jack-Barry Jack-Barry commented Jun 13, 2019

I'd like to be able to get this working from within .vue files as well - have a use case where the .scss variables file needs to be imported from a different source for different bundles.


This comment has been minimized.

Copy link

@DavidBabel DavidBabel commented Jul 22, 2019

@kuoruan can you explain more your example ?

It's still not working for me


This comment has been minimized.

Copy link

@jakobrosenberg jakobrosenberg commented Aug 15, 2019

Not working for svelte either.

  resolve: ['', '.svelte', '.js'],
  '@': path.resolve(__dirname, 'src/')

If I import @/components/Nav.svelte or @/components/Nav, I get the error that Nav.svelte.js or Nav.js could not be found.

My config was in the client plugins, when it should have been in server plugins.


This comment has been minimized.

Copy link

@thiscantbeserious thiscantbeserious commented Sep 9, 2019


Tested Version 2.0.0

Status: Can't reproduce.

I've written a test for it, containing different extension - which is passing properly.

Please keep in mind that's important how you specify your alias since Rollup will really try to import these files afterwards (adding no additional characters, e.g. backslashes or extensions).

(remember, these imports aren't automatically flagged as external - as such Rollup will try to import them (!), if you don't have a correct loader-plugin for it it will fail afterwards since it doesn't know how to handle these files obviously).

If you want to treat these "imports" as externals automatically (as in NOT handling them in Rollup any further as such not bundling them) you'll have to use my fork of rollup-plugin-rewrite-imports (not published at npm or submitted as a PR towards the plugin author).

17 tests passed*

test('Resolve different file-extensions', (t) => {
  const result = alias({
    entries: [
      {find:'@', replacement:'src'}

  const js_resolved = result.resolveId('@/my-testimport.js', '/src/importer.js');
  const ts_resolved = result.resolveId('@/my-testimport.ts', '/src/importer.js');
  const css_resolved = result.resolveId('@/my-testimport.css', '/src/importer.js');
  const svg_resolved = result.resolveId('@/my-testimport.svg', '/src/importer.js');
  const wasm_resolved = result.resolveId('@/my-testimport.wasm', '/src/importer.js');
  const svelte_resolved = result.resolveId('@/my-testimport.svelte', '/src/importer.js');, 'src/my-testimport.js');, 'src/my-testimport.ts');, 'src/my-testimport.css');, 'src/my-testimport.svg');, 'src/my-testimport.wasm');, 'src/my-testimport.svelte');


Keep in mind that the new Version 2.0 ditches the old definition syntax - the main difference is that the definitions are now within a "entries" property, which is an array of objects - which should have two properties - "find" and "replacement".

It should look like this now:

  resolve: ['', '.svelte', '.js'],
  entries: [
    { find:'@', replacement:path.resolve(__dirname, 'src/') }
@shellscape shellscape closed this Oct 17, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
None yet
9 participants
You can’t perform that action at this time.