How to include an external css file using Webpack and Angular2?

Question

I am trying to add an external reference to a CSS file in Angular2 using Webpack. My css is defined as

{ test: /\.css$/, loader: "style-loader!css-loader" },

in my webpack.config.js file and I can load css just fine when doing in a head of a typescript file:

require("./styles/style.css");

However when I try and load a CSS file inline inside a component as in:

@Component({
selector: 'todo-list',
template: `
            <section class="todoapp">                 
            </section>
`,
styles: [require('./Todolist.css')], // <--------------
directives: [TodoItem],
providers: [TodosService]
...

I get an error of: EXCEPTION: TypeError: s.replace is not a function

I also tried to load CSS via:

styles: [require('style-loader!css-loader!./Todolist.css')]

but not much luck

any help is appreciated

regards

Sean

check the webpack starter for a working example -> github.com/AngularClass/angular2-webpack-starter — Angular University
– Angular University, Commented Jan 20, 2016 at 19:22
Have you tried with [require('style-loader!css-loader!./Todolist.css').toString()]? — Eric Martinez
– Eric Martinez, Commented Jan 20, 2016 at 20:21
seems working to me as here stackoverflow.com/a/34963135/142372 — schrodinger's code
– schrodinger's code, Commented May 31, 2016 at 1:55

S M Abrar Jahin · Accepted Answer · 2017-01-03 11:17:01Z

6

What did the trick was to load css as raw text in the webpack.config.js

{
    test: /\.css$/,
    loader: 'raw!postcss'
},

regards

edited Jan 3, 2017 at 11:17

S M Abrar Jahin

14.7k24 gold badges116 silver badges170 bronze badges

answered Jan 20, 2016 at 20:28

born2net

25.1k22 gold badges72 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

unloco Over a year ago

What needs to be installed in order for this to work?

squadwuschel · Accepted Answer · 2017-02-13 20:36:44Z

My current Solution for WebPack 2 with Angular 2 for css or scss Loader;

  {
      test: /\.css$/,
      loader: [
          ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: 'css-loader' }),
          'to-string-loader',
          'css-loader'
      ],
      exclude: [helpers.root('Content')],
      include: [helpers.root('App')]
  },
  {
      test: /\.scss$/,
      loader: [ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader'] }),
          'to-string-loader',
          'css-loader',
          'sass-loader'
      ],
      exclude: [helpers.root('Content')],
      include: [helpers.root('App')]
  },

Plugins:

  new ExtractTextPlugin({ filename: "[name].css" }),

And now you can use the following in your component

@Component({
   selector: 'logmonitor',
   styleUrls: ['./logmonitor.component.scss', './logmonitor.component.css'],
   templateUrl: './logmonitor.component.html'
})

my current DevDependencies are:

 "devDependencies": {
   "@types/node": "6.0.51",
   "angular2-template-loader": "0.6.0",
   "awesome-typescript-loader": "2.2.4",
   "css-loader": "0.26.1",
   "css-to-string-loader": "0.1.2",
   "file-loader": "0.9.0",
   "url-loader": "0.5.7",
   "html-loader": "0.4.4",
   "svg-url-loader": "1.1.0",
   "less": "2.7.1",
   "less-loader": "2.2.3",
   "node-sass": "3.13.0",
   "sass-loader": "4.0.2",
   "style-loader": "0.13.1",
   "raw-loader": "0.5.1",
   "to-string-loader": "1.1.5",
   "clean-webpack-plugin": "0.1.4",
   "extract-text-webpack-plugin": "2.0.0-beta.4",
   "html-webpack-plugin": "2.21.0",
   "webpack-notifier": "1.4.1",
   "webpack": "2.1.0-beta.27",
   "webpack-dev-middleware": "1.8.4",
   "webpack-dev-server": "2.1.0-beta.12",
   "webpack-md5-hash": "0.0.5",
   "webpack-merge": "0.17.0",
   "typescript": "2.0.10",
   "typings": "2.0.0"
 }

Update for Webpack 2.2.1 and extract-text-webpack-plugin 2.0.0-rc.3 here the solution above is not working any more.

addional devdependencies

"extract-text-webpack-plugin": "2.0.0-rc.3",
"postcss-loader": "1.3.0",
"postcss-import":  "9.1.0",
"autoprefixer": "6.7.2",
"webpack": "2.2.1",

you need to add a postcss.config.js in your root of your app with the content

module.exports = {
    plugins: [
         require('postcss-import')(),
         require('autoprefixer')()
    ]
};

and the new rule for scss is the following

{
    test: /\.scss$/,
    loader: [
        { loader: 'raw-loader' },
        { loader: 'sass-loader', query: { sourceMaps: true } },
        { loader: 'postcss-loader' }
    ],
    exclude: [helpers.root('Content')],
    include: [helpers.root('App')]
 }

but it's not working any more for "extract-text-webpack-plugin": "2.0.0-rc.3" and webpack "2.2.1"

Community · Accepted Answer · 2017-05-23 11:54:48Z

1

I have posted an answer for the similar question, I hope it will help with you to understand how the styles/styleUrls works in angular2. There is a piece of code I proved to append css to the application through your component.

Load external css style into Angular 2 Component

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Jan 23, 2016 at 6:13

Downhillski

2,6652 gold badges30 silver badges40 bronze badges

1 Comment

Rahul_Dabhi Over a year ago

What about external Scripts that theme using ?

Ramast · Accepted Answer · 2017-10-18 21:17:01Z

Modules you would need to install:

css-loader style-loader and optional but recommended url-loader

Changes to your webpack config (development) module: { loaders: [ // CSS { test: /\.css$/, loader: "style-loader!css-loader", }, /* rest of your loaders */ ]

In your main javascript file include your css file

import '../css/bootstrap.min.css';

Now in case of bootstrap in particular you will get errors like this:

ERROR in ./~/css-loader!./client/css/bootstrap.min.css Module not found: Error: Cannot resolve module 'url-loader' @ ./~/css-loader!./client/css/bootstrap.min.css 6:3278-3330 6:3348-3400

ERROR in ./~/css-loader!./client/css/bootstrap.min.css Module not found: Error: Cannot resolve module 'url-loader' @ ./~/css-loader!./client/css/bootstrap.min.css 6:3449-3503

ERROR in ./~/css-loader!./client/css/bootstrap.min.css Module not found: Error: Cannot resolve module 'url-loader' @ ./~/css-loader!./client/css/bootstrap.min.css 6:3533-3586

In that case u will need to download the mentioned files locally and add this entry to your webpack config (inside "loaders" section like the first one above)

{
    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
    loader: 'url-loader',
    options: {
      limit: 10000
    }
}]

This is why u need to install url-loader package but it's only required if your css rely on other image/font files.

Note: Apparently for production use it's better to use a more complicated setup that involve ExtractTextPlugin mentioned by @squadwuschel

Here is all the details you might need https://webpack.github.io/docs/stylesheets.html

Collectives™ on Stack Overflow

How to include an external css file using Webpack and Angular2?

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related