我正在尝试创建我的第一个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()部分之前,请注意,如果我将其删除,我会在控制台中出现以下错误“预期'样式'为字符串数组”(这是我的第二个问题)
答案 0 :(得分:2)
我想也许你的webpack配置不正确。 您应该区分全局样式和组件样式,如下所示。
如果你想创建你的第一个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>
。