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‘] //意思是只对主流浏览器的最新两个版本(其实也就是不做兼容了,现代最新的浏览器基本都不需要兼容了呀)
})
]
}
}
vue-loader则只配置了css加载器以及编译css之后自动添加前缀。(所以才可以直接编译.vue文件里面的sass样式)
原文:http://www.cnblogs.com/whkl-m/p/6628245.html