vue-cli脚手架搭建的项目,打包的css顺序有问题,求教该怎么修改打包配置?

  1. 项目引入了 element-ui,我在vue组件中写了一些样式来覆盖element的样式。但是run build 打包后,css文件中element相关的样式都在我写的样式之后,导致覆盖失败了。run dev开发环境没这样的问题

  2. 附上打包配置,都是vue脚手架自动生成的,也没有改动过。求指教可能是什么原因引起的?对webpack用的还不够熟练。。

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 = process.env.NODE_ENV === 'testing'
  ? require('../config/test.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: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : 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

回答:

我自己样式使用scss,引入组件库的样式是css,也出现了这个问题,编写方式不一样时,不能靠改变顺序解决,我通过创建多个ExtractTextPlugin插件实例解决了问题:

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const extractApp = new ExtractTextPlugin('static/css/[name].[contenthash].css')
const extractCommon = new ExtractTextPlugin('static/css/common.[contenthash].css')
module.exports = { extractApp, extractCommon }

(extract-text-plugin.js)
新建了2个ExtractTextPlugin实例,extractApp(用于提出自己写的样式scss), extractCommon(用于引入的样式,我的项目里是css),注意这里的路径static是在config/index.js里build下配置的assetsSubDirectory属性

const { extractApp, extractCommon } = require('./extract-text-plugin')
if (options.extract) {
  if (loader === 'sass') {
    return extractApp.extract({
      use: loaders,
      fallback: 'vue-style-loader'
    })
  } else {
    return extractCommon.extract({
      use: loaders,
      fallback: 'vue-style-loader'
    })
  }
} else {
  return ['vue-style-loader'].concat(loaders)
}

在utils.js中引入,因为我的样式是scss写的,这里就这样改了(在cssLoaders函数中)。

extractCommon,
extractApp,
// new ExtractTextPlugin({
//   filename: utils.assetsPath('css/common.[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,
// })

最后在webpack.prod.conf.js中引入这两个实例,放到plugins属性下,注意这里放置的顺序就是打包好后在index.html中引入的顺序,然后注释掉原来的new ExtractTextPlugin({…})这个插件。

最后打包出来是两个文件,自己scss写的和引入的样式分离了,通过控制引入顺序就能解决覆盖问题。

回答:

main.js里引用顺序换一下

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue' //这里要把App的引用顺序放到最后

回答:

跟webpack 本身并没有关系,你可以在element-ui之后引入自己的css,这样子css在element-ui之后,应该可以覆盖

回答:

求解决啊。开发环境没问题,打包后就有问题了。

回答:

你好,请问这个问题解决了吗?我也正好遇到这个问题,所以向你请教一下

回答:

请问楼主解决了吗?

回答:

main.js里先引入elemnt,在引入app就好了

回答:

刚刚遇到这个问题了,我把element的css放在APP.vue就恢复正常了。

回答:

我也遇到了同样的问题。。stackoverflow,vue-cli的issue都没得到解决。。。麻烦解决的大牛说下解决方法。

 vue:v2.5.2
 main.js:
//全局插件css
import './assets/css/animate.min.css' //全局的动画使用
import './assets/css/themify-icons.css' //theimfy字体图标
import './assets/css/icomoon-icons.css' //自定义字体图标
import './assets/css/icomoon2.css'  //二期自定义图标
import 'element-ui/lib/theme-chalk/index.css' //element样式单独引入
import './assets/css/element-variables.scss' //自定义主题颜色等
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
// import './assets/css/sweet-alert.css' //弹窗样式,如果用ele,考虑后期干掉
import './assets/css/jquery.steps.css' //有步骤时候的css,如入库质检
import './assets/css/first-layout.css' //整个框架的css,如侧边导航
import './assets/css/common.css' //全局公共样式
import './assets/css/reset-element.css'; //重置element-ui的css
//全局插件js
import $ from 'jquery'
import '../node_modules/bootstrap/dist/js/bootstrap.min.js'
import './assets/js/animo.min.js' //animate动画管理
import './assets/js/first-layout.js' //整个框架的js,如侧边导航
import './assets/js/jquery.qrcode.min.js' //条码二维码
import './assets/js/JsBarcode.code39.min.js' //条码二维码
import './assets/js/particles.js'; //首页的背景动画
import './assets/js/jquery.table2excel.js' // 导出为excle相关插件
//原型
import './golbal/vue_prototype.js'

// 百度地图
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
    // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
    ak: 'xxx'
})

//element-ui
import ElementUI from 'element-ui'
Vue.use(ElementUI); //elment-ui

//vue相关插件
import Vue from 'vue'
import App from './App'

import router from './router' //引用路由
import store from './store/'


new Vue({
    el: '#app',
    router,
    store,
    template: '<App/>',
    components: { App }
})

调试样式后,看到所有组件里面的css样式(加了scope的),都打包了一个css里面。如果不用这个ExtractTextPlugin插件,是否有办法解决呢?

const ExtractTextPlugin = require('extract-text-webpack-plugin')
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../',         // 注意配置这一部分,根据目录结构自由调整
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

new ExtractTextPlugin("main.css"), //抽离成一个单独的css

回答:

把element组件的css放到main.js的第一位,且必须与element.js间隔开,不能在一起试试吧

回答:

我在引入iview的时候也遇到了相似的问题,然后参考上面 彩色的豆 同学的答案,解决了问题。不过我的具体业务场景类似下面这样的描述:

// 在mian.js中引入了N多个样式文件

    import './css/main.css'
    import './css/base.css'
    import './css/other.css'
    
// 希望build的时候,base.css单独抽出来,其余的样式build成一个文件,比如app.css
// 在我的工作场景中,iview.css是需要被单独打包成一个css文件的

在 彩色的豆 同学提到的方法中,是根据文件的后缀进行extract,但在我的工作场景中都是相同的.css文件后缀名,所以只能根据文件名称进行extract。具体的操作也是在vue-cli生成的项目下的build/utils.js中进行了代码修改:

  1. styleLoaders 接口
  for (const extension in loaders) {
    const loader = loaders[extension]
    if (extension === 'css') {
      output.push({
        test: new RegExp('\\.' + extension + '$'),
        exclude: /iview\.css$/,  //必须把iview.css从这里排除掉哦,不能让两个ExtractTextPlugin实例同时都处理iview.css文件,不然会报错
        use: loader
      })
    } else {
      output.push({
        test: new RegExp('\\.' + extension + '$'),
        use: loader
      })
    }
  }
  let options1 = Object.assign({
    lovely: '1'
  }, options)   // 这里是为了用一个自定义的lovely属性来标记iview.css的loader
  output.push({
    test: /iview\.css$/,
    use: exports.cssLoaders(options1)['css']  
  })
  return output
}
  1. cssLoaders 接口
    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      console.log(!!options.lovely, '111=====')
      if (!!options.lovely) {
        return extractCommon.extract(loaders)     // lovely标记的作用就在这里发挥啦,因为是iview.css才会lovely,所以,就要用这个extractCommon实例来抽取css文件
      } else {                                 
        return extractApp.extract({         // 其余的就用extractApp来处理就可以啦
          use: loaders,
          fallback: 'vue-style-loader'
        })
      }
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

回答:

有一个做法是,不在main.js里引入element的css,而是在index.html中引入,然后你把你覆盖的css,合并另一个css文件,例如叫change.css,你在index.html中的head标签最后引入这个change.css。
注意一些css的写法规范,即 .parent .child{}这样写比.child{}优先级高,如果实在不行,就在你要覆盖的css样式后面加上!important

回答:

使用了scoped么,vue-loader在12.2.0增加了>>>功能,如果是less或者sass的话,在12.2.1可以使用/deep/

https://github.com/vuejs/vue-…

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注