1.安装sass的依赖包
2.在build文件夹下的webpack.base.conf.js的rules里面添加配置，如下红色部分
文件在编译之前进行检测，检查有没有语法错误'eslint-loader'
// enforce: 'pre'选项可以确保，eslint插件能够在编译之前检测，如果不添加此项，就要把这个配置项放到末尾，确保第一个执行
// 对vue文件使用vue-loader，该loader是vue单文件组件的实现核心，专门用来解析.vue文件的
loader: 'vue-loader',// 将vueLoaderConfig当做参数传递给vue-loader,就可以解析文件中的css相关文件
options: vueLoaderConfig
},{
test: /\.js$/,// 对js文件使用babel-loader转码,该插件是用来解析es6等代码
loader: 'babel-loader',// 指明src和test目录下的js文件要使用该loader
include: [resolve('src'),resolve('test')]
},{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,// 对图片相关的文件使用 url-loader 插件，这个插件的作用是将一个足够小的文件生成一个64位的DataURL
// 可能有些老铁还不知道 DataURL 是啥，当一个图片足够小，为了避免单独请求可以把图片的二进制代码变成64位的
// DataURL，使用src加载，也就是把图片当成一串代码，避免请求，神不神奇？？
loader: 'url-loader',options: {
// 限制 10000 个字节一下的图片才使用DataURL
limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,// 字体文件处理，和上面一样
loader: 'url-loader',options: {
limit: 10000,name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
3.修改模板里面的style lang="scss";例如模板红色标记
评论
