vue-loaderはcssLoadersメソッドを呼び出してcssローダプロパティを構成します.

  module: {
    loaders: [     //          ，test      ，loader    ，  
        {
            test: /\.vue$/,
            loader: 'vue'
        },
        {
            test: /\.js$/,
            loader: 'babel',
            include: projectRoot,
            exclude: /node_modules/
        },
        {
            test: /\.json$/,
            loader: 'json'
        },
       /* {
            test: /\.css$/,   //        ，        css           ，     sass          。
            loader: ["vue-style-loader", "css-loader"]
        },
        {
            test: /\.less$/,
            loader: ["vue-style-loader", "css-loader", "less-loader"]
        },
        {
            test: /\.(scss|sass)$/,
            loader: ["node-sass", "vue-style-loader", "css-loader", "sass-loader"]
        },
        {
            test: /\.scss/,
            loaders: ['css', 'autoprefixer', 'sass'],
        },*/
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url',
            query: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
        },
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url',
            query: {
              limit: 10000,
              name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
        }
    ]
  },
// vue-loader   
  vue: {   //      // cssLoaders                        
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),  //  css    
 // Autoprefixer     PostCSS     CSS     
    postcss: [
      require('autoprefixer')({  
        browsers: ['last 2 versions']  //                 （          ，                  ）
      })
    ]
  }
}

　　

静的リソースパス

を構成する.

cssLoadersを生成するロードする.vueファイルのスタイル

styleLoadersを生成するロードが存在しない.vueファイルに単独で存在するスタイルファイル

vue-loaderはcssローダのみを構成し、cssをコンパイルした後に接頭辞を自動的に追加します.(だから.vueファイルのsassスタイルを直接コンパイルすることができます)
 
上記のコードではexports.cssLoaders(options)が呼び出され、各タイプのスタイルファイルに対する処理方式が返され、具体的には以下のように実現される.

exports.cssLoaders = function (options) {
  options = options || {}

  var cssLoader = { 
    loader: 'css-loader',
    options: {  //options loader      
      minimize: process.env.NODE_ENV === 'production', //         
      sourceMap: options.sourceMap  //        sourceMap  
    }
  }
  function generateLoaders (loader, loaderOptions) {  //  loader
    var loaders = [cssLoader] //    css-loader
    if (loader) { //     loader  
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, { // loaderOptions sourceMap      
          sourceMap: options.sourceMap
        })
      })
    }
    if (options.extract) { //      options  extract  true
      return ExtractTextPlugin.extract({  //ExtractTextPlugin  js    css  
        use: loaders,  //   loader
        fallback: 'vue-style-loader' //           loader
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }
  return {  //  css     loader      generateLoaders()   loader
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

　　
転載先:https://www.cnblogs.com/whkl-m/p/6628245.html