Vue Webpack构建突破布尔玛CSS

问题描述：

我使用vue-cli为我的vue项目搭建了一个webpack模板。随后，我添加了Bulma的CSS。当我正常运行程序（npm run dev）时，CSS正确呈现。但是，在使用默认webpack配置构建生产项目（npm run build）时，Web应用程序的样式现在未对齐。有谁知道如何解决这个问题？Vue Webpack构建突破布尔玛CSS

对于比较：

Production Build of Vue with broken CSS

Dev version of Vue rendering CSS properly

以下是我的WebPack配置（webpack.prod.conf.js）

var path = require('path') 
 
var utils = require('./utils') 
 
var webpack = require('webpack') 
 
var config = require('../config') 
 
var merge = require('webpack-merge') 
 
var baseWebpackConfig = require('./webpack.base.conf') 
 
var CopyWebpackPlugin = require('copy-webpack-plugin') 
 
var HtmlWebpackPlugin = require('html-webpack-plugin') 
 
var ExtractTextPlugin = require('extract-text-webpack-plugin') 
 
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 
 

 
var env = config.build.env 
 

 
var webpackConfig = merge(baseWebpackConfig, { 
 
    module: { 
 
    rules: utils.styleLoaders({ 
 
     sourceMap: config.build.productionSourceMap, 
 
     extract: true 
 
    }) 
 
    }, 
 
    devtool: config.build.productionSourceMap ? '#source-map' : 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': env 
 
    }), 
 
    new webpack.optimize.UglifyJsPlugin({ 
 
     compress: { 
 
     warnings: false 
 
     }, 
 
     sourceMap: true 
 
    }), 
 
    // extract css into its own file 
 
    new ExtractTextPlugin({ 
 
     filename: utils.assetsPath('css/[name].[contenthash].css') 
 
    }), 
 
    // Compress extracted CSS. We are using this plugin so that possible 
 
    // duplicated CSS from different components can be deduped. 
 
    new OptimizeCSSPlugin({ 
 
     cssProcessorOptions: { 
 
     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: true 
 
     // more options: 
 
     // https://github.com/kangax/html-minifier#options-quick-reference 
 
     }, 
 
     // necessary to consistently work with multiple chunks via CommonsChunkPlugin 
 
     chunksSortMode: 'dependency' 
 
    }), 
 
    // split vendor js into its own file 
 
    new webpack.optimize.CommonsChunkPlugin({ 
 
     name: 'vendor', 
 
     minChunks: function (module, count) { 
 
     // 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', 
 
     chunks: ['vendor'] 
 
    }), 
 
    // copy custom static assets 
 
    new CopyWebpackPlugin([ 
 
     { 
 
     from: path.resolve(__dirname, '../static'), 
 
     to: config.build.assetsSubDirectory, 
 
     ignore: ['.*'] 
 
     } 
 
    ]) 
 
    ] 
 
}) 
 

 
if (config.build.productionGzip) { 
 
    var 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) { 
 
    var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 
 
    webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 
 
} 
 

 
module.exports = webpackConfig

答

我正面临着和你一样的问题。经过一些调试后，我意识到这是由于css规则的顺序。看起来，构建的css文件与开发服务器的规则顺序不同。

我在这个主题上搜索了一下。在webpack文档中，我发现：

请记住，管理模块的执行顺序很困难，因此请设计您的样式表，以便顺序无关紧要。（你可以，但是，靠一个给定的CSS文件中的顺序。）

我通过使用#id代替.class增加我的自定义CSS选择器的特殊性解决我的问题。

例如：的

// my custom css rules 
#navbar a { 
    color: white 
}

代替：

// my custom css rules 
.navbar a { 
    color: white 
}

这样的自定义规则兑布尔玛者的顺序并不重要，因为优先将永远为id在class选择。我希望这是有用的

Vue Webpack构建突破布尔玛CSS

相关推荐