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

How to resolve css / scss paths ? #49

Closed
DavidBabel opened this issue Mar 20, 2019 · 10 comments

Comments

@DavidBabel
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
  alias({
    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'
@XindaSayHi

This comment has been minimized.

Copy link

@XindaSayHi XindaSayHi commented Mar 21, 2019

Hi,

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

@DavidBabel

This comment has been minimized.

Copy link
Author

@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
@demsking

This comment has been minimized.

Copy link

@demsking demsking commented Apr 14, 2019

Any update for this issue?

@DavidBabel

This comment was marked as off-topic.

Copy link
Author

@DavidBabel DavidBabel commented May 13, 2019

seems unmaintained

@kuoruan

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")
}
@aseem2625

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
includePaths(includePathOptions),

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

It should work for sass too.

@Jack-Barry

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.

@DavidBabel

This comment has been minimized.

Copy link
Author

@DavidBabel DavidBabel commented Jul 22, 2019

@kuoruan can you explain more your example ?

It's still not working for me

@jakobrosenberg

This comment has been minimized.

Copy link

@jakobrosenberg jakobrosenberg commented Aug 15, 2019

Not working for svelte either.

alias({
  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.

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

@thiscantbeserious

This comment has been minimized.

Copy link
Contributor

@thiscantbeserious thiscantbeserious commented Sep 9, 2019

Edit:

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).

https://github.com/thiscantbeserious/rollup-plugin-rewrite-imports

17 tests passed*

test('Resolve different file-extensions', (t) => {
  const result = alias({
    resolve:[
      '.ts',
      '.css', 
      '.svg', 
      '.wasm', 
      '.svelte'
    ],
    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');

  t.is(js_resolved, 'src/my-testimport.js');
  t.is(ts_resolved, 'src/my-testimport.ts');
  t.is(css_resolved, 'src/my-testimport.css');
  t.is(svg_resolved, 'src/my-testimport.svg');
  t.is(wasm_resolved, 'src/my-testimport.wasm');
  t.is(svelte_resolved, 'src/my-testimport.svelte');
});

@jakobrosenberg:

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:

alias({
  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.
Projects
None yet
9 participants
You can’t perform that action at this time.