Question

我正在使用Angular2应用程序，并希望使用PrimNg。

除了我无法加载样式之外，所有功能都可以正常工作启动开发服务器时。

Mt index.html

<head>
  <title>CMS</title>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="Angular2 File Upload">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/aristo/theme.css" />
  <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.min.css" />
  <link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/primeng.min.css" />
</head>

<body>
  <upload-component>Loading...</upload-component>

</body>

</html>

我的webpack.config.js

var path = require('path');
var webpack = require('webpack');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var HtmlPlugin = require('html-webpack-plugin')

const ENV = process.env.NODE_ENV = 'development';
const HOST = process.env.HOST || 'localhost';
const PORT = process.env.PORT || 8080;

const metadata = {
    env: ENV,
    host: HOST,
    port: PORT
};

module.exports = {
    devServer: {
        contentBase: path.join(__dirname, '../webapp/app'),
        stats: "errors-only",
        historyApiFallback: true
    },
    stats: "errors-only",
    devtool: 'source-map',

    entry: {
        '@angular': [
            'rxjs',
            'reflect-metadata',
            'zone.js'
        ],
        'common': ['es6-shim'],
        'app': './app/src/main.ts'
    },

    output: {
        path: path.join(__dirname, '../webapp/app'),
        filename: '[name].js',
        sourceMapFilename: '[name].js.map',
        chunkFilename: '[id].chunk.js'
    },
    module: {
        loaders: [{
            test: /\.ts$/,
            loaders: ['ts-loader', 'angular2-template-loader'],
            exclude: [/node_modules/, /releases/]
        }, {
            test: /\.json$/,
            loader: 'json'
        }, {
            test: /\.css$/,
            loader: 'raw'
        }, { 
            test: /\.html$/, 
            loader: 'raw' 
        }, {
            test: /\.(png|jpg)$/,
            loader: 'url?limit=10000'
        }]
    },

    plugins: [
        new CommonsChunkPlugin({
            names: ['@angular', 'common'],
            minChunks: Infinity
        }),
        new HtmlPlugin({
            template : path.join(__dirname, 'index.html')
        })
    ],
    resolve: {
        extensions: ['.ts', '.js', '.json', '.css', '.html']
    },


};

有什么建议吗？

Answer 1

我通过将.css文件导入diraclty form main main.ts文件解决了这个问题。

这解决了我的问题： https://stackoverflow.com/a/40464229/2960896

PrimeNg样式没有加载webpack

1 个答案: