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

谁践踏了优雅 2022-06-12 08:58 228阅读 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文件需要引入哪些包，可以 [点击这里查看][Link 1]

[Link 1]: http://blog.csdn.net/itkingone/article/details/74729508