无法渲染 primeNG css 因为升级 webpack 已经升级并且 Angular 4

Question

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

我尝试在 index.html 中导入样式，在组件和 stylesUrl [] 中导入它们。一切都不起作用，我现在知道问题出在我的 webpack.config.js 文件中。我已经安装：

npm install file-loader --save

并从此 post post 开始执行以下步骤：

不过我没有成功。

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"
    ],

无法渲染 primeNG css 因为升级 webpack 已经升级并且 Angular 4

Unable to render primeNG css since upgrade webpack has upgraded and Angular 4

angular

webpack

primeng