Question

我正在尝试创建我的第一个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（）部分之前，请注意，如果我将其删除，我会在控制台中出现以下错误“预期'样式'为字符串数组”（这是我的第二个问题）

Answer 1

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

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

Answer 2

基于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>。

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

2 个答案: