Question

我无法为primeNG渲染css。我的项目中的css覆盖了它，或者甚至没有被调用。

我尝试导入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));
}

Answer 1

我在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'

Answer 2

我最终转到Angular-CLI，将我需要的css文件放在.angular-cli.json文件中并且它有效。

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

由于升级webpack已升级和Angular 4，因此无法呈现primeNG css

2 个答案: