Стиль PrimeNg не загружается с помощью веб-пакета

Я работаю над приложением Angular2 и хочу использовать PrimNg.

Все функции работают нормально, за исключением того, что я не могу загрузить стили при запуске сервера разработки.

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']
    },


};

Какие-либо предложения?


webpack angular primeng
person pxr_64    schedule 07.11.2016    source источник
comment
У меня была та же проблема, которую я решил, скопировав стили и темы в папку в папке ресурсов, а затем ссылаясь на них оттуда.   -  person John Baird    schedule 07.11.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я решил проблему, импортировав файлы .css в основной файл main.ts.

Это решило мою проблему: https://stackoverflow.com/a/40464229/2960896

person pxr_64    schedule 07.11.2016