一个单独的CSS文件，带有angular 2和webpack 2? [英] Single separate CSS file with angular 2 and webpack 2?

问题描述

我有一个简单的应用程序，可以使用Angular 2和Webpack 2，使用sass作为模板和angular2-template-loader，因此我可以在组件中使用templateUrl和styleUrls而不是使用require.

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.

现在，我要有一个单独的 css文件，可以直接在页面上链接到该文件.这将使用sass，包括bootstrap和bootswatch.我希望将它们分开，以便我的页面可以在角度引导之前显示相同样式的内容.这是我的装载机:

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'

我需要'raw'才能使模板使用angular2-template-loader正确加载.我以为可以为要分离的文件使用单独的'sass'扩展名，并使用'extract-text-webpack-plugin'，但是我无法正常工作:

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

我还尝试了提取"加载器.最接近成功的方法是添加条目"./src/main.sass"，并将其用于加载程序:

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'
    ] 
}

但这会生成一个javascript文件(省略注释):

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", ""]);

好吧，通过从上面的列表中删除原始"加载程序，并通过如下所示的javascript文件中的sass文件，使更新生效(我认为):

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');

这是正确的方法吗?

推荐答案

我使用提取器"加载程序使其工作，并在 github .这是我使用的加载器配置，请注意传递给css加载器的-url使其忽略url()，因此它不会尝试处理字体，因为我想自己处理字体:

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
]

要区分我的角度模板和要单独创建的文件的scss文件，我只需将应用程序目录和我的角度模板包括"在原始加载器中:

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/,

并从将生成css文件的加载器中排除该目录:

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

exclude: /app/,

这篇关于一个单独的CSS文件，带有angular 2和webpack 2?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！