0
저는 Angular2 app에서 작업 중이며 PrimNg를 사용하려고합니다.PrimeNg 스타일이 webpack으로로드되지 않았습니다.
dev 서버를 시작할 때 로드 할 스타일을 얻을 수 없다는 점을 제외하면 모든 기능이 작동합니다.
산의 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']
},
};
어떤 제안이?
:
이
내 문제를 해결했다. –