Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@import statements are not parsed #38

Closed
idshdx opened this issue Jun 15, 2017 · 8 comments
Closed

@import statements are not parsed #38

idshdx opened this issue Jun 15, 2017 · 8 comments

Comments

@idshdx
Copy link

idshdx commented Jun 15, 2017

rollup-config.js:

export default {
  entry: 'src/main-aot.ts',
  dest: 'aot/dist/build.js', // outputs a single application bundle
  sourceMap: false,
  plugins: [
    sass({
      // Write all styles to the bundle destination where .js is replaced by .css
      output: true
    /*include: ['src/style/app.scss'],*/ this triggers many erros, syntax error at '@', syntax error at $header-gray: ... 

    }),
    nodeResolve({
      jsnext: true,
      main: true
    }),
.....

JS and CSS bundles are generated but where I have @import statements, the sass is not compiled into css.
colors.scss(which is imported in app.scss):

/*
OCEANA color palettes and usage
*/
/*TEXT*/
$header-gray: #303030; //Card header Text Card header icon
$blue-dark-grey: #304050; //main text

generated bundle.css(with no errors):

OCEANA color palettes and usage
*/
/*TEXT*/
/*UI*/
CODE FROM COLORS.SCSS SHOULD BE HERE BUT IS MISSING

.mat-elevation-z0 {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); }
....

Are @import statements working?
If I'm missing something, pardon me.

@differui
Copy link
Collaborator

differui commented Jun 21, 2017

Hi @idzer0lis, Try to install latest package and build again.

And a few test cases about typescript were added:https://github.com/differui/rollup-plugin-sass/blob/master/test/index.js#L225

@arthurkhlghatyan
Copy link

same for me, what's the state of the issue?
image

@differui
Copy link
Collaborator

differui commented Oct 6, 2017

@arthurkhlghatyan Can you post your rollup config file?

@pjjanak
Copy link

pjjanak commented Jan 2, 2018

I think the issue is that this plugin isn't treating ~ as a shortcut to node_modules. Whether that's actually a bug here or not is probably debatable.

@Alfredo-Delgado
Copy link

You'll need to pass an importer to node-sass like:

sass({
  options: {
    importer(path) {
      return { file: path.replace(/^~/, 'node_modules/') };
    }
  }
})

@tomtobac
Copy link

Hi, I run into the same problem, but now with the importer option in not able to point out the correct path.

image

Looks like the file that is looking is node_modules/tcp-settings. and it should be node_modules/tcp-settings/index.scss

@differui
Copy link
Collaborator

Hi @tomtobac try to use full path as the import id or setup your resolve plugin(rollup-plugin-node-resolve) with:

resolve({
  extensions: ['.scss', '.sass'],
})

@differui differui mentioned this issue May 26, 2018
@differui
Copy link
Collaborator

fixed by #53

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants