無法渲染primeNG CSS，因爲升級webpack已經升級並且Angular 4

我無法渲染primeNG的CSS。我的項目中的CSS覆蓋它，或者甚至沒有被調用。無法渲染primeNG CSS，因爲升級webpack已經升級並且Angular 4

我試圖導入index.html中的樣式，將它們導入組件和stylesUrl []中。所有都沒有工作，我現在知道這個問題在我的webpack.config.js文件中。我已經安裝：

npm install file-loader --save

跟着從這篇文章後下列步驟操作：how to render static css from node modules

但是失敗了我。

webpack.config.js 

var merge = require('merge-deep'); 
var path = require('path'); 

var common = { 
    devtool: 'source-map', 

    cache: false, 
    entry: { 

    }, 
    output: { 
    path: root('dist'), 
    filename: '[name].js', 
    }, 

    resolve: { 
    // ensure loader extensions match 
    extensions: ['','.ts','.js','.json'] 
    }, 

    module: { 
    loaders: [ 
     // Support for .ts files. 
     { 
     test: /\.ts$/, 
     loader: 'ts-loader', 
     exclude: [ /\.(node|worker)\.ts$/, /node_modules/ ] 
     } 
    ], 
    } 

}; 



module.exports = [ 
    merge(common, { 
    target: 'web', 
    entry: { 
     'browser': root('./index.js') 
    }, 
    output: { 
    }, 
    resolve: { 
     packageAlias: 'web', 
    }, 
    node: { 
     crypto: false, 
     console: false, 
     process: false, 
     global: false, 
     buffer: false 
    } 
    }), 
    merge(common, { 
    target: 'node', 
    entry: { 
     'node': root('./index.node.js'), 
    }, 
    output: { 
     libraryTarget: 'commonjs' 
    }, 
    resolve: { 
     packageAlias: 'server', 
    } 
    }) 
] 

function root(args) { 
    args = Array.prototype.slice.call(arguments, 0); 
    return path.join.apply(path, [__dirname].concat(args)); 
}

來源

2017-04-24 Drew1208

PrimeNG！= PrimeFaces雖然它是對「網站」 ......請記住，不包括PrimeFaces標籤使用PrimeNG – Kukeltje

@Kukeltje感謝澄清時。你在（我的問題）之前遇到過這個問題嗎？ – Drew1208

我不使用PrimeNG ...（PrimeFaces用戶） – Kukeltje

在以下給供應商我結束了移動Angular- CLI，將我需要的css文件放在.angular-cli.json文件中，並且工作正常。

"styles": [ 
     "../node_modules/primeng/resources/themes/omega/theme.css", 
     "../node_modules/primeng/resources/primeng.css", 
     "styles.css" 
    ],

來源

2017-05-18 19:43:58 Drew1208

我在Angular 2.4上遇到了同樣的問題（準備儘快遷移到Angular4）。這裏是我的webpack.js我sharedConfig下的模塊

module: { 
     exprContextCritical: false, 
     rules: [ 
      { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] }, 
      { test: /\.html$/, use: 'html-loader?minimize=false' }, 
      //{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }, 
      { test: /\.(png|gif|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, 
      { 
       test: /\.scss$/, 
       loaders: ["style-loader", "css-loader", "sass-loader"] 
      }, 
      { //this rule will only be used for any vendors 
       test: /\.(css|woff|ttf|eot|svg)$/, 
       loaders: ['style-loader', 'css-loader'], 
       include: [/node_modules/] 
      }, 
      { 
       test: /\.css$/, 
       loaders: ['to-string-loader', 'css-loader'] 
       //,exclude: [/node_modules/] //add this line so we ignore css coming from node_modules 
      } 
     ] 
    },

我還添加了webpack.config.vendor.js

'bootstrap/dist/css/bootstrap.css', 
'font-awesome/css/font-awesome.css', 
'primeng/primeng', 
'primeng/resources/themes/omega/theme.css', 
'primeng/resources/primeng.min.css'

來源

2017-05-18 19:37:53

謝謝你的迴應。當你移動到4時，我會使用CLI，這對我來說簡單得多。 – Drew1208

無法渲染primeNG CSS，因爲升級webpack已經升級並且Angular 4

回答

相關問題