vue-cli3创建项目使用css预处理配置

1，vue.config.js

最近安装了下vue cli3版本， 和vue cli2 相比文件目录少了很多配置，没有了build和config目录，那么像vue cli2 之前的关于端口号的配置，打包之后路径的配置，图片的配置 等等，应该去哪里配置呢?                    vue cli3 可以在项目根目录新建一个vue.config.js文件(和package.json)平级，像之前的很多繁琐配置，都可以在这个文件里配置啦

注意：vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

2，处理css预加载

比如使用less

1，可以在创建项目的时候选择使用的预处理器

2，如果创建项目的时候选的默认，内置的 webpack 仍然会被预配置为可以完成所有的处理，我们只需要手动安装处理预处理器的loader即可，比如：

# Sass

npm install -D sass-loader node-sass

# Less

npm install -D less-loader less

# Stylus

npm install -D stylus-loader stylus

3，导入相应的文件类型(例如less)，比如在main.js中引入事先写好的style.less,在*.vue文件中这样来使用：

<style lang="less">

</less>

进阶：向预处理器loader传递选项

解决问题：比如向所有的less样式传入共享的全局变量，定义的less变量在variables.less文件中定义，如果每个less文件中都需要引入，就需要我们一个一个引入比较麻烦，通过配置vue.config.js

解决方法：配置vue.config.js文件中的css.loaderOptions选项

代码：