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文件中这样来使用: