使用webpack捆绑生产时,角度组件样式错误

时间:2017-09-01 05:35:35

标签: javascript css angular webpack ng2-smart-table

我正在使用角度,第三方组件和webpack开发一个Web应用程序。

当我将所有内容捆绑在生产模式中时,某些组件似乎不能以正确的方式应用它们在开发模式中的样式。例如:

ngx-chips 组件。 Issue opened in github

发展: 生产:

ng2-smart-table 组件Issue opened in github

发展: 生产:

我根本不确定是否是自己组件的失败。

这是我正在使用的webpack.config.common.js

var webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
    filename: "bundle.css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
    entry: {
        'app': './assets/app/main.ts'
    },

    resolve: {
        extensions: ['.js', '.ts']
    },

    module: {
        rules: [
            {
                test: /\.html$/,
                use: [{ loader: 'html-loader' }]
            },
            {
                test: /\.css$/,
                use: [{ loader: 'raw-loader' }]
            },
            {
                test: /\.scss$/,
                use: extractSass.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    fallback: "style-loader"
                })
            }]
        ,
        noParse: [
            /aws-sdk/
        ],
        loaders: [
            {
                test: /.json$/,
                loaders: ['json']
            },
        ],
        exprContextCritical: false

    }
};

以下是我用来捆绑webpack的脚本:

  "scripts": {
"start": "node ./bin/www",
"build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch",
"build:prod": "del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'"

我非常感谢你的帮助!

0 个答案:

没有答案