react生產環境樣式丟失問題 在瀏覽器中看到標簽有類名，但沒有樣式

在開發環境下樣式沒有問題，打包到生產環境發現樣式不生效

可能的原因

1.dist文件夾下未生成css樣式文件。

webpack4中tree-shaking會默認移除 JavaScript 上下文中的未引用的代碼，用來達到減輕重量的思想，tree-shaking通過 package.json 的 "sideEffects" 屬性判定哪個文件具有副作用，當 "sideEffects" ：false時，項目中未被引用到的文件會被移除判定均無副作用，就會把沒有被引用的代碼從環境中自動移除

解決

將css文件添加到“sideEffects”數組中

//package.json
 
    //改前
  "sideEffects": false,  
    //改后
  "sideEffects": [*.css"]

2.webpack打包時autoprefixer自動移除老式過時的代碼，

解決

將打包OptimizeCSSPlugin配置添加autoprefixer:{remove: false}

//文件： build/webpack.prod.conf.js或者build/webpack.build.conf.js
new OptimizeCSSPlugin({
    cssProcessorOptions: config.build.productionSourceMap ?
        { safe: true, map: { inline: false }, autoprefixer:{remove: false} } :
        { safe: true }
}),

但是上述方案都沒有解決我遇到的問題，

在瀏覽器中看到標簽有類名，但沒有樣式

 

 

在子元素中發現有樣式，其他都正常，只有這一個類名沒有樣式，

查看打包后的樣式文件，使用sublimetext，由於打包后的css都壓縮成一行，可安裝css format插件，展開顯示css方便查看，

打包后的css也是正常的，類名下是有樣式的，為什么沒有顯示呢？

我發現這個類名在第一行，是第一個選擇器，把這個選擇器復制了一份，放在后面，

直接放到生產環境下發現樣式正常顯示了。

 

回顧

雖然解決 了問題，但仍然不知道原因，可能我是用scss寫的樣式原因，