首页 > 代码库 > vue-loader 配置了css加载器属性。

vue-loader 配置了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‘]  //意思是只对主流浏览器的最新两个版本(其实也就是不做兼容了,现代最新的浏览器基本都不需要兼容了呀)
      })
    ]
  }
}

  

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

vue-loader则只配置了css加载器以及编译css之后自动添加前缀。(所以才可以直接编译.vue文件里面的sass样式)

vue-loader 配置了css加载器属性。