本篇教程介绍了HTML+CSS入门 vue-loader配置了CSS加载器属性，希望阅读本篇文章以后大家有所收获，帮助大家HTML+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: {   //后面才清楚是// vue-loader 中已经配置了
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),  //加载css配置模块
 // Autoprefixer是一个基于PostCSS的智能添加CSS前缀的插件
    postcss: [
      require(‘autoprefixer‘)({  
        browsers: [‘last 2 versions‘]  //意思是只对主流浏览器的最新两个版本（其实也就是不做兼容了，现代最新的浏览器基本都不需要兼容了呀）
      })
    ]
  }
}

　　

    配置静态资源路径
    生成cssLoaders用于加载.vue文件中的样式
    生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件

vue-lo    

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！