个回答

• Mr_bigshot

  2018-07-18 14:53:51

  已采纳

  可以参考这篇文章

  https://blog.csdn.net/harsima/article/details/80819747
  

  1

• songweifun

  2020-03-03 10:55:22

  在之前版本中我们使用extract-text-webpack-plugin来提取CSS文件，不过在webpack 4.x中则应该使用mini-css-extract-plugin来提取CSS到单独文件中

  基于webpack 3.0的Vue项目

  const ExtractTextPlugin = require('extract-text-webpack-plugin')
  config.module.rules.push(
      {
          test:/\.styl(us)?$/,
          use:ExtractTextPlugin.extract({
              fallback:'style-loader',
              use:[
                  'css-loader',
                  {
                      loader:'postcss-loader',
                      options:{
                          sourceMap:true
                      }
                  },
                 'stylus-loader'
                 ]
          })
      })
  config.plugins.push(
      new ExtractTextPlugin('styles.[hash:8].css')
  )

  基于webpack 4.0的Vue项目

  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  config.module.rules.push(
      {
      test:/\.styl(us)?$/,
      use:[
          'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
              loader:'postcss-loader',
              options:{sourceMap:true}
          },
          'stylus-loader'
          ]
      }
  config.plugins.push(
      new MiniCssExtractPlugin(
          {
              filename: 'styles.[contenthash:8].css'
          }
      )
  )

  
  

  
  

  1

• neoo

  2018-11-12 01:48:46

  我把contenthash改成了hash就编译通过了

  1

• Mr_bigshot

  2018-07-18 14:29:02

  util.js

  删掉 ExtractTextPlugin，改用 MiniCssExtractPlugin 

  ```
  

  if (options.extract) {

  let extractLoader = {

  loader: MiniCssExtractPlugin.loader,

  options: {}

  }

  return [extractLoader, 'css-loader'].concat(['postcss-loader'], loaders)

  } else {

  return ['vue-style-loader', 'css-loader'].concat(['postcss-loader'], loaders)

  }

  ```

  0