webpack2.X提取Vue文件中的css、less或者sass样式

最新推荐文章于 2021-03-02 15:26:33 发布

itKingOne

最新推荐文章于 2021-03-02 15:26:33 发布

阅读量1.3k

点赞数

分类专栏： webpack 文章标签： webpack2.0 vue 样式

本文链接：https://blog.csdn.net/itKingOne/article/details/75513652

版权

webpack 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

webpack打包vue项目的时候我们可以通过配置把vue里的css打包到一个文件，然后放在页面上，具体配置如下：

var cssLoaders = function (options) {
  options = options || {}
  function generateLoaders (loaders) {
    var sourceLoader = loaders.map(function (loader) {
      var extraParamChar
      if (/\?/.test(loader)) {
        loader = loader.replace(/\?/, '-loader?')
        extraParamChar = '&'
      } else {
        loader = loader + '-loader'
        extraParamChar = '?'
      }
      return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
    })
    if (options.extract) {
      return ExtractTextPlugin.extract({fallback:'vue-style-loader', use:sourceLoader})
    } else {
      sourceLoader.unshift("vue-style-loader");
      return sourceLoader
    }
  }
  return {
    css: generateLoaders(['css?minimize']),
    postcss: generateLoaders(['css?minimize']),
    less: generateLoaders(['css?minimize', 'less']),
    sass: generateLoaders(['css?minimize', 'sass?indentedSyntax']),
    scss: generateLoaders(['css?minimize', 'sass'])
  }
}

plugins:[
    new webpack.LoaderOptionsPlugin({
      test:/\.vue$/,
      options: {
        vue: {
          loaders: cssLoaders({
            sourceMap: useCssSourceMap
          }),
          postcss: [
            require('autoprefixer')({
              browsers: ['last 3 versions']
            })
          ]
        },
      }
    }),
  ]

具体编译less、sass文件需要引入哪些包，可以点击这里查看