$color:green;$fontSize:14px;VueCLI项目支持posts、CSS模块和预处理器，包括Sass、Less和Stylus。我们可以从以下几个方面来理解和理解：引用资源所有编译后的CSS都是经过css-loader处理的，css-loader会解析url()并将其解析成模块请求，也就是说我们可以使用本地文件结构的相对路径来引用资源.注意：如果您在npm依赖项中或通过webpack别名引用文件，则路径必须以~为前缀以避免歧义。预处理器创建项目时，可以选择预处理器（Sass/Less/Stylus）。如果不这样做，内部的webpack配置仍然是预先配置的来处理所有这些配置，然后我们只需手动安装相应的webpack加载器：//installSassnpminstall-Dsass-loadersass//installLessnpminstall-Dless-loaderless//安装Stylusnpminstall-Dstylus-loaderstylus然后导入对应的文件类型，或者在*.vue文件中使用：$color:green;$fontSize:14px;autoimport如果你想自动导入文件（颜色、变量、mixins...）你可以使用样式资源加载器style-resources-loader。这是vue-config.js中的示例导入：vue-cli-plugin-style-resources-loader也可用。PostCSS可以通过.postcssrc或任何PostCSS加载配置支持的配置源配置PostCSS，并通过vue.config.js中的css.loaderOptions.postcss配置PostCSS加载器。默认情况下，autoprefixer插件是启用的，如果你想配置浏览器目标，你需要使用package.json中的browserslist字段。CSS模块可以通过在*.vue文件中使用CSS模块。要在JavaScript中将CSS或其他预处理器文件导入为CSS模块，文件名应以.module结尾。(css|less|sass|scss|styl)importstylesfrom'./style.module.css'//alsoworkswithallsupportedpreprocessorsimportsassStylesfrom'./style.module.scss'如果你想删除文件名称中的.module，需要在vue.config.js中设置css.requireModuleExtension为false：如果要自定义生成的CSS模块的类名，可以通过vue.config中的css.loaderOptions.css进行自定义.js:passoptionstothepreprocessorloader如果我们想将选项传递给预处理器的webpack加载器，我们可以使用vue.config.js中的css.loaderOptions选项来实现。装载机ass-loadersassless-loaderstylus-loader
