Angular 2和Webpack,应用程序可以工作,但我没有看到任何样式应用于我的页面/组件

时间:2016-10-31 00:08:22

标签: css angular webpack

有谁知道为什么我的页面/组件上看不到任何样式?

webpack.common.js:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts'
    },

    resolve: {
        extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
                exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
            },

            {
                test: /\.html$/,
                loader: 'html'
            },

            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file?name=assets/[name].[hash].[ext]'
            },

            {
                test    : /\.scss$/,
                loaders : ['raw', 'style', 'css', 'postcss', 'sass'],
                exclude : [/node_modules/]
            },

            {
                test    : /\.css$/,
                loaders : ['raw', 'style-loader', 'postcss'],
                exclude : [/node_modules\/(?!bootstrap)/]
            }

        ]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

还没有加载/应用供应商libe bootstrap.css

这是我定义组件的一个例子:

import {Component, OnInit, Input} from '@angular/core';
import {MovieService} from "../../services/movie.service";
import {Router, Route, ActivatedRoute} from "@angular/router";
import "rxjs/Rx";


@Component({
    selector: 'fl-films',
    templateUrl: './films-list.component.html',
    styleUrls: ['./films-list.component.scss']
})

0 个答案:

没有答案