webpack 怎么引入semantic-ui

你的报错显示对应的字体文件加载错误，需要对应的加载器来加载，应该在webpack配置文件里面添加对应的loaders,类似这样

{

test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,

loader: "file-loader"

}

准备工具

你需要使用命令行去安装，Windows 用 Powershell ，Mac 使用终端。然后确定你已经安装好了 npm 与 gulp 。

安装 Semantic UI

先为项目创建一个目录，然后进入到这个目录的下面，比如我在自己的桌面上去为项目创建一个目录：

cd ~/desktop

mkdir ninghao-semantic

cd ninghao-semantic

使用 npm 去安装一下 Semantic UI：

npm install semantic-ui

过一会儿会出现设置 Semantic UI 的提示，按上下箭头可以选择：

❯ Automatic (Use defaults locations and all components)

Express (Set components and output folder)

Custom (Customize all src/dist values)

Automatic：自动配置，一切都用默认的设置。

Express：快速设置，只需要设置组件还有输出的目录。

Custom：自定义，完全自己去定义 src/dist 目录。

选择默认的 Automatic ，回车执行，又会提示：

[?] We detected you are using NPM. Nice!

Is this your project folder?

/Users/xiaoxue/Desktop/ninghao-semantic (Use arrow keys)

❯ Yes

No, let me specify。

---