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>