vue-cli自动加一些奇怪的东西？？？

Question

用vue-cli自动生成了一个项目。在项目的根目录下，新建了一个名为style.module.css的文件，内容如下：

*{
  box-sizing: border-box;
}
body,html {
  margin: 0;
  background-color: #fa572f;
}
.center {
  margin: auto;
  width: 1024px;
}

然后，在main.js中，通过 import style from './style.module.css' 导入css。
然后运行cli服务时，发现，浏览器中的.center变成了酱紫奇怪的东东：.style-module_center_KPaYI 这是怎么回事？？

Answer 1

/deep/
说明

Answer 2

当你通过

import style from './style.module.css'

这种方式引入样式的时候，实际上是css-module在起作用。样式后面添加的hash，是css-module在起作用，目的是防止样式全局污染。

如果你想让样式在全局生效，你可以

import './style.module.css'