could not import scss file

[koshuang]

Hi,

I tried to use plugin-sass but always got an error like

system.src.js:5036 GET http://localhost:3000/dist/app/admin/test.scss.js 404 (Not Found)

Could someone give me a hint? Here is what I do.

I set my system.confi.js as

System.config({
  ...
  buildCSS: true,
  separateCSS: false,

  meta: {
    "*.scss": { "loader": "sass" },
    "*.sass": { "loader": "sass" },
    ...
 }
});

and have admin.js which include follow code:

import './test.scss';

and very simple test.scss in same folder as admin.js:

.test {
  color: red;
}

Thanks!

[dougludlow]

@koshuang are you using JSPM?

[koshuang]

@dougludlow yes, I am using JSPM

this is the change I did: imheretw/imhere-angular-starter@23b72a7

[dougludlow]

@koshuang weird, looking at your config, it looks correct. I don't see anything odd right off the bat.

[jarrodmedrano]

This doesn't work for me either. Same error.

[jarrodmedrano]

This is the error I'm getting

Error loading http://localhost:9080/styles/fonts.scss!http://localhost:9080/scss.js as "../styles/fonts.scss!" from http://localhost:9080/js/app.js

[jarrodmedrano]

I'm pretty sure this is the issue

systemjs/systemjs#287 (comment)

[danwellman]

This issue seems to be caused by the defaultJSExtensions configuration property that JSPM sets when it creates the config.js file. This is why .js is being appended to the scss file. Seems to be a SystemJS/JSPM issue rather than an issue with this plugin

[danwellman]

I have this same issue, I've followed the instructions in the readme, added the recommended meta configuration, but am seeing that, because the defaultJSExtensions property is set to true (by JSPM) my scss files cannot be loaded and I see

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:63557/scss/styles.scss.js

In the console. Setting defaultJSExtensions to false removes the error shown above (so that the scss file can be loaded), but breaks JSPM instead, and other JS modules cannot then be loaded.

I've also tried using "defaultExtension": false in the meta config and that hasn't helped either.

Is there a way to fix this issue?

[doingweb]

I worked around this by providing an explicit loader along with the filename:

System.import('./theme.scss!sass');

I did only have the one file to import so YMMV