我是Angular的新手,并尝试按照教程进行操作,但是使用 styleUrls 属性时出现以下错误:
“未捕获的错误:预期'样式'是字符串数组”
我的组件文件如下:
import { Component } from '@angular/core';
@Component({
selector: 'app-entry',
templateUrl: 'entry.component.html',
styleUrls: ['entry.component.css']
})
export class EntryComponent {
title: string = 'My First Photo';
photo: string = 'http://placehold.it/800x500?text=Angular Basics';
description: string = 'A description of My First Photo';
}
我的配置文件如下:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('[name].css');
const ROOT = path.resolve(__dirname, '..');
function root(pathParts) {
if (typeof pathParts === 'string') {
pathParts = pathParts.split('/');
}
return path.join.apply(path, [ROOT, ...pathParts]);
}
const context = root('src');
module.exports = {
context,
entry: {
polyfills: './polyfills.ts',
vendor: './vendor.ts',
app: './main.ts'
},
output: {
path: root('wwwroot'),
publicPath: '/',
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].chunk.js'
},
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader?configFileName=' + root('src/tsconfig.json'), 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=/assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
exclude: root('src'),
loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
},
{
test: /\.css$/,
include: root('src'),
loader: 'raw'
},
{
test: /\.css$/,
include: root('src/styles'),
loader: extractCSS.extract(['css'])
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'index.html'
}),
extractCSS
]
};
我已经搜索过,但是目前我没有尝试过,因此没有任何帮助。