Angular / Webpack没有将styleUrls绑定到组件

时间:2017-02-24 18:57:19

标签: javascript css angularjs angular webpack

我正在尝试创建我的第一个Angular2项目并陷入了一个非常愚蠢的事情。我正在使用:

"@angular/common": "^2.3.1",
"webpack": "^2.2.1",
"extract-text-webpack-plugin": "^2.0.0-rc.2",

webpack.config内容:

module.exports = {
    devtool: "source-map",
    entry: { 'polyfills': './angularApp/polyfills.ts', 'vendor': './angularApp/vendor.ts', 'app': './angularApp/main.ts'},
    output: { path: __dirname + '/wwwroot/', filename: 'dist/[name].bundle.js', chunkFilename: 'dist/[id].chunk.js', publicPath: '/' },
    resolve: { extensions: ['.ts', '.js', '.json'] },
    devServer: { historyApiFallback: true, contentBase: path.join(__dirname, '/wwwroot/'), watchOptions: { aggregateTimeout: 300, poll: 1000 }},
    module: {
        rules: [
            { test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },
            { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: { loader: "css-loader", options: { sourceMap: true }} }) }
        ],
        exprContextCritical: false
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({ name: ['app', 'vendor', 'polyfills'] }),
        new CleanWebpackPlugin(['./wwwroot/dist', './wwwroot/assets']),
        new ExtractTextPlugin({ filename: '[name].css', allChunks: true }),
        new HtmlWebpackPlugin({ filename: 'index.html', inject: 'body', template: 'angularApp/index.html' }),
    ]
};

应用HTML中的组件引用:

<div class='col-sm-3'>
    <navigation></navigation>
</div>

navigation.component.css内容:

li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
    background-color: #4189C7;
    color: white;
} 

最后是navigation.component.ts:

import { Component } from '@angular/core';
@Component({
    selector: 'navigation',
    templateUrl: './navigation.component.html',
    styleUrls: ['./navigation.component.css'.toString()]
})
export class NavigationComponent { }

问题

构建运行时没有任何错误,但组件样式是全局应用的,并不是特定于组件的。检查HTML我注意到标签上有唯一的标识符,但CSS上没有。 但是,如果我像这样放置css

//styleUrls: ['./navigation.component.css']
    styles: [`
li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
    background-color: #4189C7;
    color: white;
}`]

样式仅按预期应用于组件并接收唯一标识符。问题是项目范围,所以我怀疑配置错误。老实说,我完全迷失了,并且花了很多时间在这上面,我确信我错过了一些明显的东西。

在你从组件中搜索.toString()部分之前,请注意,如果我将其删除,我会在控制台中出现以下错误“预期'样式'为字符串数组”(这是我的第二个问题)

2 个答案:

答案 0 :(得分:2)

我想也许你的webpack配置不正确。 您应该区分全局样式和组件样式,如下所示。 enter image description here

如果你想创建你的第一个Angular2项目,我建议你可以参考这个项目。 https://github.com/ntesmail/angular2-webpack-template

答案 1 :(得分:0)

基于JavaScript依赖项,我发现了与此类似的问题...

我构建了一个JHipster应用程序(使用Webpack 4x),然后将css-loader(和其他JS软件包)从3.6.0升级到4.3.0,以确保我只是所有版本的最新版本JS依赖项。

这使用stylesUrl破坏了组件样式。

在尝试了一些版本锁定之后,我发现将css-loader软件包锁定回版本3.6.0可以解决此问题。

package.json中:

"css-loader": "3.6.0",

然后运行yarn install,然后运行yarn start(或npm

如果它无法正常工作,则页面<style>内的<head>元素将不会出现或损坏。在浏览器中,您可能会看到:<head> ... <style>[object Module]</style> ... </head>

broken styles