Vue 应用 Sass、Scss、Less 和 Stylus

88次阅读

共计 1526 个字符，预计需要花费 4 分钟才能阅读完成。

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

<style lang="scss">
   $color: red;
</style>

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

写在 vue 中的 less

所有 vue 文件的

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

<style scoped lang="less">
.notFoundPage {
    background-color: #0a8acd;
    color: #fff;
    position: relative;
    h1 {font-weight: 500;}
}
</style>

<link href="https://www.linuxprobe.com/static/css/app.21d3ff57a1596ef90908ba816fbb9496.css" rel="stylesheet">

对于外 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'
},

<script type="text/javascript" src="https://www.linuxprobe.com/static/js/style.c67fefaf3f60c5ca074a.js"></script>

注：在 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 的处理规则。