CODEWITHSUNDEEP
angulartypescriptimportsassangular5
Paulo Martins
Paulo Martins

Reputation: 167

Import style as module on Angular

The problem:

Consider this project structure:

/src
  /public
    /styles
      /general
        /tables.scss
  /secure
    /components
      /someTable1
        /someTable.component.ts
        /someTable.component.css
      /someTable2

I want to import the default styles on "table.scss" founded on path src/app/public/styles/general/tables.scss using a alias, like a angular module. Ex:

import { TableScss } from '@styles/general/table.scss';

@Component({
  selector: 'some-table-1',
  templateUrl: './some-table-1.component.html',
  styleUrls: ['./some-table-1.component.css', TableScss]
})

It's make sense? I already register the alias on tsconfig.app.json but I got the following error:

ERROR in src/app/secure/components/some-table1/some-table-1.component.ts(x,y): error TS2307: Cannot find module '@styles/general/table.scss'.

Any Idea? I have other mode to doing this?

Upvotes: 1

Views: 9165

Answers (1)

rhavelka
rhavelka

Reputation: 2386

So you shouldn't be importing css files like that. I'm not an expert in styles, but you may find some inspiration on how we do styles. So we have something set up like this

src/assets/styles/_table.scss

/** your styles here **/

src/assets/styles/_main.scss

@import "table"
@import "otherStyleFile"

src/styles.scss

@import 'assets/styles/main';

[hidden] {
    display: none !important;
}

.angular-cli.json

{
  "apps": {
    [{
      "styles": [ "styles.scss"]
    }]
  }
}

and that should do it. note that file names have underscores but the imports do not, that is intentional.

But I think you could skip a lot of the steps and do this for your case since you only have the one css file. Then your whole project should inherit the styling so you don't need to import it anywhere. I don't know if you need an underscore in the scss filename to work, but I don't think you do.

.angular-cli.json

{
  "apps": {
    [{
      "styles": [ "table.scss"]
    }]
   }
}

Upvotes: 4

Related Questions