The css style is not the same in development environment and distribution environment

Question

My Vue.js project, the css style is not the same in development environment and distribution environment.

This is the development environment effect:

This is the distribution environment effect:

Why there is this difference between them?

This is my webpack.prod.conf code, I am not sure whether is because of my webpack configuration:

'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const GenerateAssetPlugin = require('generate-asset-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')


const env = require('../config/prod.env')

const createServerConfig = function(compilation){
  let cfgJson={ApiUrl:"http://103.20.12.76:8000"};
  return JSON.stringify(cfgJson);
}

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    // new UglifyJsPlugin({
    //   uglifyOptions: {
    //     compress: {
    //       warnings: false
    //     }
    //   },
    //   sourceMap: config.build.productionSourceMap,
    //   parallel: true
    // }),
    new UglifyJsPlugin({
      sourceMap: true,
      uglifyOptions: {
        ecma:8,
        compress: {
          warnings: false
        }
      }
    }),
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      // Setting the following option to `false` will not extract CSS from codesplit chunks.
      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
      allChunks: true,
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: false
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
    // keep module.id stable when vendor modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // enable scope hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),

    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ]),

//          from:path.join(__dirname, "static", "js"),
        filename: 'static/js/server_config.json',
        fn: (compilation, cb) => {
            cb(null, createServerConfig(compilation));
        },
        extraFiles: []
    }),

//          from:path.join(__dirname, "static", "js"),
        filename: 'static/js/server_config.json',
        fn: (compilation, cb) => {
            cb(null, createServerConfig(compilation));
        },
        extraFiles: []
    })
  ]
})

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

---

EDIT-1

I find this detail:

In my distribution page, I find the width: 25%;

if I uncheck it, the style will become normal.

However, if I in my local development environment, I find if I do not uncheck the width: 25%, there is still works fine. so maybe this is not relative to the ivu-col-6.

---

EDIT-2

I put the computed panel in there:

---

Answer 1

1. check whether in your components' <style> label, you add the scoped.

2. if you use 3th UI lib like element-ui, check whether the App import is after the 3th UI lib, the order is care about.

   import 'element-ui/lib/theme-default/index.css';
   ...
   import App from './App'; 
   

3.in your webpack.prod.conf.js, check whether the cssProcessorOptions have safe: true:

   new OptimizeCSSPlugin({
     cssProcessorOptions: {
       safe: true
     }
   }),

detail in GitHub.

Answer 2

I think this is a problem of order of CSS definition. The development and production CSS definition order might be different. Reference link: https://vue-loader.vuejs.org/migrating.html#style-injection.

You need to make use of CSS specificity to fix the issues.

For example

// dmeo.html
<span class='Color'>Colored Text</span>

// demo.css
.Color {
   color: blue;
}

.Color {
   color: red;
}

The above definition will result is color: red.

You can alter the result by increasing the specificity of the first rule.

// dmeo.html
<span class='Color'>Colored Text</span>

// demo.css
span.Color {
   color: blue;
}

.Color {
   color: red;
}

You can check the CSS specificity using https://specificity.keegan.st/.