Single separate CSS file with angular 2 and webpack 2?

Question

I've got a simple app working with Angular 2 and Webpack 2, using sass for templates and angular2-template-loader so I can use templateUrl and styleUrls instead of using require in my components.

Now I want to have a separate css file I can link to directly on my page. This will use sass and include bootstrap and bootswatch. I want that to be separate so my page can display something in the same styles before angular bootstraps. Here are my loaders:

{ test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },
{ test: /\.html$/, loader: 'raw' }, // for templates, need 'raw'
{ test: /\.css$/, loader: 'raw', exclude: /node_modules/ }, // for templates, need 'raw'
{ test: /\.scss$/, loaders: ['raw', "sass"] }, // for templates, need 'raw'

I need the 'raw' for the templates to load correctly using angular2-template-loader. I thought I could use a separate 'sass' extension for the files I want to separate and use the 'extract-text-webpack-plugin', but I can't get it to work:

var extractSASS = new ExtractTextWebpackPlugin('[name].css');

// in loaders:
{ test: /\.sass$/, loader: extractSASS.extract(['style', 'css', 'sass']) }

// in plugins:
extractSASS

I've also tried the 'extract' loader. The closest I've come to success is by adding the entry "./src/main.sass" and using this for the loader:

 { test: /\.sass$/, loaders: [
        {
            loader: 'file',
            query: {
                name: '[name].css'
            }
        },
        'extract',
        'raw',
        'css',
        'sass'
    ] 
}

But that generates a javascript file (comments omitted):

exports = module.exports = require("./../node_modules/css-loader/lib/css-base.js")();
exports.push([module.id, "h1 {\n  background-color: #333; }\n", ""]);

Ok, updating I got it to work (I think) by removing the 'raw' loader from the list above, and requiring the sass file in javascript like this:

var x = require('./main.sass');

Is that the right way to do this? How could I use scss as the extension and not have it mess up my angular templates that just use 'raw' and 'sass' as the loaders?

score 0 · Answer 1 · answered Aug 14 '16 at 10:53

0

Looks like Extract Text Plugin is what you need.

answered Aug 14 '16 at 10:53

andreypopp

6,887
5
26
26

He tried the ExtractTextWebpackPlugin, but failed to configure it. That's what the question was about. – marius Nov 10 '16 at 16:49

score 0 · Accepted Answer · answered Aug 14 '16 at 11:23

I got it to work using the 'extract' loader and created a sample on github. This is the loader config I used, note the -url passed to the css loader to make it ignore url() so it doesn't try to process fonts since I want to handle those myself:

test: /\.scss$/, loaders: [
  {
    loader: 'file',
    query: {
      name: '[name].css'
    }
  }, 'extract', 'css?-url', 'sass' // compile with sass, then css, then extract
]

To differentiate between the scss files for my angular templates and for the files I want to create separately, I just 'include' the app directory with my angular templates in the raw loader for them:

include: /app/,

And exclude that directory from the loader that will generate css files:

exclude: /app/,

Single separate CSS file with angular 2 and webpack 2?

2 Answers2

Linked