webpack环境下
一、打包路径问题
解决：到config文件夹中打开index.js文件，更改build里面的assetsPublicPath属性为"./"。
二、配置scss
1.安装依赖
npm install node-sass --save-dev
npm install sass-loader --save-dev
2.在用scss的地方写上
<style lang='scss'></style>
三、配置svg-sprite-loader
1.安装依赖
npm install svg-sprite-loader --save-dev
2.到build文件夹中打开webpack.base.conf.js文件，加上
{ //options不设置的话，symbolId默认图标文件名
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('图标路径')],
options: {
symbolId: 'icon-[name]'
}
}
3.接着上一步，在另一个svg的loader中去掉图标路径
exclude: [resolve('图标路径')]
4.在script中引入图标路径，语句结尾不加分号，es6规范。
import '目标图标路径'
5.上一步麻烦，我们通过require引入所有
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('图标路径', true, /\.svg$/)
requireAll(req)
6.接下来通过标签使用图标，记得加上#
<svg class='图标样式'>
<use xlink:href='#图标名'></use>
</svg>
7.还是麻烦，封装成组件吧
<template>
<svg class="icon">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script>
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('图标路径', true, /\.svg$/)
requireAll(req)
export default {
props: ['name'],
computed: {
iconName() {
return '#' + this.name
}
}
}
</script>
<style>
.icon {
width: 32px;
height: 32px;
}
</style>
8.over，可以愉快的使用了
//引入组件
import 组件名 from '组件路径'
export default {
components: { 组件名 }
}
//通过标签使用
<组件名 name='图标名'></icon>
