Webpacker: Import CSS Styles in Rails, Angular, Webpacker Project.

[mayordwells]

I am trying to import Individual CSS modules into my component in Angular.
For example

• component1.ts
• component1.css / component1.sass

• component2.ts
• component2.css / component2.sass

I have included this in the html.d.ts which allowed me to import html files as a string before, this also allowed me to import css file as a string, I'm not sure if this is needed.

declare module "*.css" {
  const content: string
  export default content
}

I added the css to the list of imports but angular did not allow me to use homecss as a variable in the component decorator.
So used the style's url as is, however i am getting an error.
I have installed css-loader. But I have no idea what other configuration i need to do to make this work. At least for the html part, it was clearly explained in the documentation here - https://github.com/rails/webpacker/blob/master/docs/typescript.md
So why is there no clear documentation on how to do the same thing with css?
Here's my component file:

import { Component } from '@angular/core';
import home from './home.html';
import homecss from './home.css';

@Component({
  selector: 'eg-home',
  template: home,
  styleUrls: ['./home.css']
})
export class HomeComponent { }

And here's what my error in the console looks like:

zone.js?6524:2933 GET http://localhost:5000/dashboard/home.css 404 (Not Found)
scheduleTask @ zone.js?6524:2933
ZoneDelegate.scheduleTask @ zone.js?6524:411
Zone.scheduleTask @ zone.js?6524:236
Zone.scheduleMacroTask @ zone.js?6524:259
(anonymous) @ zone.js?6524:2966
proto.(anonymous function) @ zone.js?6524:1366
ResourceLoaderImpl.get @ platform-browser-dynamic.es5.js?3bad:54
DirectiveNormalizer._fetch @ compiler.es5.js?524d:14079
(anonymous) @ compiler.es5.js?524d:14201
DirectiveNormalizer._loadMissingExternalStylesheets @ compiler.es5.js?524d:14201
DirectiveNormalizer.normalizeExternalStylesheets @ compiler.es5.js?524d:14178
(anonymous) @ compiler.es5.js?524d:14110
then @ compiler.es5.js?524d:1683
DirectiveNormalizer.normalizeTemplate @ compiler.es5.js?524d:14110
CompileMetadataResolver.loadDirectiveMetadata @ compiler.es5.js?524d:15139
(anonymous) @ compiler.es5.js?524d:26833
(anonymous) @ compiler.es5.js?524d:26832
JitCompiler._loadModules @ compiler.es5.js?524d:26829
JitCompiler._compileModuleAndComponents @ compiler.es5.js?524d:26799
JitCompiler.compileModuleAsync @ compiler.es5.js?524d:26728
PlatformRef_._bootstrapModuleWithZone @ core.es5.js?de3d:4536
PlatformRef_.bootstrapModule @ core.es5.js?de3d:4522
(anonymous) @ index.ts?c69e:5
ZoneDelegate.invokeTask @ zone.js?6524:425
Zone.runTask @ zone.js?6524:192
ZoneTask.invokeTask @ zone.js?6524:499
invokeTask @ zone.js?6524:1540
globalZoneAwareCallback @ zone.js?6524:1566
zone.js?6524:690 Unhandled Promise rejection: Failed to load home.css ; Zone: <root> ; Task: Promise.then ; Value: Failed to load home.css undefined

[giwa]

Hi @mayordwells

I faced this issue as well. I found a workaround. Basically, it is the same approach to #394 .

1. declare a module

declare module "*.css" {
  const content: string
  export default content
}

1. update style loader in webpacker

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

environment.loaders.set('style', {
    test: /\.(scss|sass|css)$/,
    use: [{
        loader: "to-string-loader"
    }, {
        loader: "css-loader"
    }, {
        loader: "postcss-loader"
    }, {
        loader: "resolve-url-loader"
    }, {
        loader: "sass-loader"
    }]
})

module.exports = environment

1. import css

app/javascript/hello_angular/app/app.component.ts

import { Component } from '@angular/core';
import styleString from './app.component.css';

@Component({
  selector: 'hello-angular',
  template: `<h1>Hello {{name}}</h1>`,
  styles:[styleString]
})
export class AppComponent {
  name = 'Angular!';
}

[giwa]

@gauravtiwari should the angular template and docs be updated to include an example of using external files for styles? I wouldn't mind putting together a PR for that.

[ytbryan]

I don't use angular but please do so @giwa cc @gauravtiwari

[mayordwells]

Hi @giwa thanks for your response. Do we need to install any of these loaders, like css-loader, postcss-loader?
Could you please share the link to the documentation once the PR is merged?
Thank you.

[gauravtiwari]

Please feel free to add this to docs 👍

[audiodude]

Tried this with a fresh Rails app created with --webpack=angular. At first I got a bunch of errors that the various loaders weren't installed. I did yarn add for all of the missing ones, and now I get the following error:

    ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/to-string-loader/src/to-string.js!./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js!./app/javascript/hello_angular/app/app.component.css
    Module build failed: Syntax Error

    (2:9) Unknown word

      1 |
    > 2 |         var result = require("!!../../../../node_modules/css-loader/index.js!../../../../node_modules/postcss-loader/lib/index.js!../../../../node_modules/resolve-url-loader/index.js!../../../../node_modules/sass-loader/lib/loader.js!./app.component.css");
        |         ^
      3 |
      4 |         if (typeof result === "string") {

You can see my component here: https://github.com/audiodude/my-links/blob/6815d7223f5b9b94ff12b26280e6b0bec7c4b9e8/app/javascript/hello_angular/app/app.component.ts

I honestly have no idea what "Unknown word" means or how to debug this.

Thanks for any help.

[gauravtiwari]

@audiodude Ahh not sure what that error is but I just tried to reproduce your issue and couldn't.

• created a rails webpacker app with angular - rails new angular-app --webpack=angular
• added a css module file and normal css - https://github.com/gauravtiwari/webpacker-angular-app/blob/master/app/javascript/hello_angular/app/app.component.ts#L2
• added node typing - https://github.com/gauravtiwari/webpacker-angular-app/blob/master/package.json#L11
• imported and required css module

Please see: https://github.com/gauravtiwari/webpacker-angular-app

Everything works out of the box.

[audiodude]

@gauravtiwari Thanks for the reply.

I removed all of the files that were added as part of the main solution on this bug, and attempted the "out of the box" solution you suggested. Although I can successfully import './app.component.css'; and ./app.component.sass, neither seems to have any affect on my styles.

EDIT: I've started a new project with rails new --webpack=angular --database=postgresql and made a few modifications to make the index page point to the Angular app. I tried to import './app.component.css' at the top of app.component.ts, but the style is still not being applied. My new repo is here: https://github.com/audiodude/my-links/

[gauravtiwari]

@audiodude Have you included styles in view? https://github.com/gauravtiwari/webpacker-angular-app/blob/master/app/views/pages/index.html.erb#L4

[audiodude]

@gauravtiwari Thanks, that fixes it! One thing though, this creates a "global" stylesheet, correct? That means I don't get to use so-called "component styles" (https://angular.io/guide/component-styles). It seems the solution by @giwa on this bug was trying to address the latter.

Thanks for your help though, I think I can get by with this approach for now.

[gauravtiwari]

Great 👍

One thing though, this creates a "global" stylesheet, correct?

Nope it creates per component stylesheets so say if you create another module called 'page_2' and have another css file imported then you have to import styles in your view again with same pack name.

Webpacker also supports css modules with following extension: module.css, module.scss or module.sass (which is scoped per component) - https://github.com/css-modules/css-modules and example here: https://github.com/gauravtiwari/webpacker-angular-app/blob/master/app/javascript/hello_angular/app/app.component.ts#L3

---

https://angular.io/guide/component-styles#using-component-styles

Looks like this is CSS in JS approach so should work out the box. I haven't tried it though.

[aronbohl]

Are there any official docs for this yet? I wasn't able to find any and I'm still getting some really strange errors when trying to import any type of component styles. I tried a solution similar to what @giwa had posted with no luck.

[DenniJensen]

I have the same issue. I am not into webpacker this much to figure out where is issue is. Angular supports by default templateUrl and styleUrls. This is not the case with webpacker in rails.

[justin808]

Here's an example using Rails + React + Webpacker + react_on_rails: https://github.com/shakacode/react-webpack-rails-tutorial