Vue 应用 Sass、Scss、Less 和 Stylus

Vue项目中应用预处理器，可以有效减少css代码量， 推荐使用Sass、Scss、Less预处理器。在创建项目的时候可以选择预处理器 (Sass/Less/Stylus)。

如果当时没有选择，内置的 webpack 仍然会被预配置为可以完成所有的处理，也可以手动安装相应的 webpack loader：

# Sass
npm install -D sass-loader node-sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

然后，就可以导入相应的文件类型，或在 .vue 文件中这样来使用：

   $color: red;

下面主要讲解一下vue中应用less或者sass的方法，以less为例(style.less)。

写在 vue 中的 less

所有vue文件的

,会被vue-loader处理编译到一个css文件中，最终自动通过link标签写入index.html（在vue-loader.conf.js中配置）

.notFoundPage {
    background-color: #0a8acd;
    color: #fff;
    position: relative;
    h1 {
        font-weight: 500;
    }
}

对于外 less 文件

在main.js中import style.less 。

此时webpack会把style.less和各个vue文件的less部分一起编译到同一个css文件，并在index.html的link中自动引入。

在webpack的入口文件entry中加上style.less，编译完的出口文件会被自动注入到index.html文件中。

entry: {
  app: './src/main.js',
  style: './src/style/style.less'
},

注：在vue2.x的webpack.base.conf.js：

{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
},

以上是针对.vue文件的处理规则，其中vueLoaderConfig是vue-cli自己定义的加载器，专门处理css样式。 vueLoaderConfig引用的utils.js:

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
 }

所以不需要再在rules里写.css .less 的处理规则。