Skip to content

Load semantic ui as global css in the application #1741

Closed
@rkusuma

Description

@rkusuma

Please provide us with the following information:

  1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
    Windows 8.1
  2. Versions. Please run ng --version. If there's nothing outputted, please run
    in a Terminal: node --version and paste the result here:
    angular-cli: 1.0.0-beta.11-webpack.2
    node: 6.3.1
    os: win32 x64
  3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
    do on your code? etc.
    This app created using the CLI.
    I'm trying to using semantic ui for the css. I'm using their less plugin
npm install --save semantic-ui-less

How can i use the semantic ui less for global css in my application?
I'm trying to load it in app.component.ts with failure.

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styles: [
    require('../../node_modules/semantic-ui-less/semantic.less')
  ],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  title = 'app works!';
}
  1. The log given by the failure. Normally this include a stack trace and some
    more information.
ERROR in ./~/semantic-ui-less/semantic.less
Module build failed: Can't resolve '../../theme.config' in '[PATH]\node_modules\semantic-ui-less\definitions\modules'
 @ [PATH]\node_modules\semantic-ui-less\definitions\modules\transition.less (line 19, column 0)
 near lines:

   @import (multiple) '../../theme.config';

 @ ./src/app/app.component.ts 20:16-76
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

  1. Mention any other details that might be useful.

Thanks! We'll be in touch soon.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions