Ionic-app-scripts: Error occurred while add external css in component

[extart]

After update Ionic to 2.0.0-rc.1 when you build the project fails.

@Component({
    styleUrls: ['map.css'] ,
    encapsulation: ViewEncapsulation.None,
  })

Result:

Error: Compilation failed. Resource file not found
Y:/maps/.tmp/app/map/map.css
ngc failed
ionic-app-script task: "build"
Error: Error

The css file is not copied to the directory .tmp and the project can not be compiled.

[jgw96]

Hello @extart , does this work with a dev build? You can do a dev build by running ionic serve.

[extart]

I am trying to install an application on Android device

[jgw96]

Definitely, just trying to localize this to either the prod build or dev build. Also is there a reason that you are trying to use a css file instead of using the sass file included in the component directory?

[extart]

[00:30:15] ionic-app-scripts 0.0.36
[00:30:15] build prod started .
[00:30:15] clean started ...
[00:30:15] clean finished in 2
[00:30:15] copy started ...
[00:30:15] ngc started ...
[00:30:15] copy finished in 43
[00:30:16] lint started ...

I think prod build...
Standard application with minor revisions.
I use css because it is from external library

[extart]

In file node_modules\@ionic\app-scripts\dist\ngc.js css not be copied to .tmp directory.
Only *.ts and *.html
Therefore, an error occurs when compiling, because the compiler does not find the css file in .tmp directory

function filterCopyFiles(filePath, hoop) {
var shouldInclude = false;
try {
var stats = fs_extra_1.statSync(filePath);
if (stats.isDirectory()) {
shouldInclude = (EXCLUDE_DIRS.indexOf(path_1.basename(filePath)) < 0);
}
else {
shouldInclude = (helpers_1.endsWith(filePath, '.ts') || helpers_1.endsWith(filePath, '.html'));
}
}
catch (e) { }
return shouldInclude;
}

[extart]

The only problem is if you specify css in @Component directive
@Component({
styleUrls: ['map.css'] ,
encapsulation: ViewEncapsulation.None,
})

[danbucholtz]

@extart,

For now, just use inline css in the components or a .scss file in the directory next to the component. We don't support styleUrls at this time.

Thanks,
Dan

[extart]

It turns out that with the release RC0 you stopped supporting one of the possibilities Angular 2?
Before the release RC0 of the release of all work.
It is normal practice for your developers?
I showed where the bug, why should we give up the Angular 2 opportunity, rather than fix the error?

[mklilley]

@danbucholtz Hi, I just started playing with Ionic2 yesterday and have been going through the tutorial. In the tutorial there is indeed a scss file in the component directories, but they don't appear to be added to the build when i use serve. I am used to ionic1 so forgive me if I am missing something obvious, but when I dug into the sass.js file in node_modules and added a console.log(componentDirectories) in the function getComponentSassFiles I don't see any reference to the src/pages directory where my components are living. The only directory which referenced the components was the .tmp directory, but there doesn't appear to be any scss files in there which would explain why the component scss is not being added. Can you confirm whether this is expected behaviour or a bug? From your comment above it feels like a bug, but I might be wrong.

Thanks

Matt

[danbucholtz]

@mklilley, sounds like a bug to me. I will investigate further.

Thanks,
Dan

[mklilley]

Thanks @danbucholtz

[mklilley]

Hi @danbucholtz I can see you guys are super busy releasing updates for app-scripts. I just wondered did you have any more thoughts on that scss bug?

Thanks again,

Matt

[extart]

Hi @danbucholtz.
Using "styleUrls" together with the "encapsulation" css styles allows you to isolate a specific component of the css common to all applications. It really allows you to write modular applications, not just the application - examples. Do you plan to fix this and when?

[andrevcf]

confirmed bug for 0.0.45

[danbucholtz]

@mklilley,

It is definitely a bug. We'll be fixing it very soon. High priority for us.

Thanks,
Dan

[realappie]

Any updates on this bug?

[andrevcf]

+1

[danbucholtz]

@mklilley,

I think this is fixed now. At least in master. I verified it the other day on an unreleased build of app-scripts. So worst case... this is coming this week 😄

As for the supporting the style annotions from Angular, we don't recommend using them. Just use sass. Or, you inline styles in the component, but don't use styleUrl as we don't support it and probably won't anytime soon.

Thanks,
Dan

[mklilley]

Thanks @danbucholtz

[agusdutra]

I'm facing this issue on an application that I'm developing using the last Ionic CLI (last week). Using ionic serve.
Was this solved? Thanks.

[MaciejCaputa]

@agusdutra Same here, it does not seem to work.