Vue CLI 使用CSS

Vue CLI项目支持postss、CSS模块和预处理器，包括Sass、Less和 Stylus。

我们可以从下面几个方面来了解与认识：

引用资产

所有编译的CSS都由 css-loader 处理，它解析了 url() 并将它们解析为模块请求，也就意味着我们可以使用基于本地文件结构的相对路径来引用资源。注意：如果要引用npm依赖项内的文件或通过webpack别名引用文件，则路径必须以 ~ 作为前缀，以避免歧义。

预处理器

创建项目时，可以选择预处理器（Sass/Less/Stylus）。如果没有这样操作的话，则内部webpack配置仍然预先配置为处理所有这些配置，然后我们只需手动安装相应的webpack加载程序：

// 安装Sass
npm install -D sass-loader sass
// 安装Less
npm install -D less-loader less
// 安装Stylus
npm install -D stylus-loader stylus

然后导入相应的文件类型，或在 *.vue 文件中使用它们：

<style lang="scss">
	$color: green;
    $fontSize: 14px;
</style>

自动导入

如果想要自动导入文件（对于颜色、变量、MIXIN……），则可以使用样式资源加载程序 style-res