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

<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="/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="/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 的处理规则。

Vue 应用 Sass、Scss、Less 和 Stylus相关推荐

vue-cli 3.0集成sass/scss到vue项目
尝鲜使用vue-cli 3.0.0-beta.6,很容易就可以完成scss到vue项目中. vue-cli 3提供了两种方式集成sass/scss: 创建项目是选择预处理器sass 手动安装sass- ...
[vue] 如何引入scss？引入后如何使用？
[vue] 如何引入scss?引入后如何使用? 安装scss依赖包: npm install sass-loader --save-dev npm install node-sass --save-d ...
CSS预处理器语言：Sass、LESS、Stylus
CSS预处理器语言:Sass.LESS.Stylus Sass 和 Less 都使用的是标准的 CSS 语法.默认 Sass 使用 .sass 扩展名, Less 使用 .less 扩展名,Stylu ...
Sass、LESS 和 Stylus区别总结
CSS 预处理器技术已经非常的成熟了,而且也涌现出了越来越多的 CSS 的预处理器框架.本文便总结下 Sass.Less CSS.Stylus这三个预处理器的区别和各自的基本语法. 1.什么是 CSS ...
【面试总结系列】CSS 预编译器 Sass、Less、Stylus 三者之间的比较详解
想要查看关于 CSS 的相关面试题,请移步至面试题 - CSS 篇查看,其他内容面试题请移步至 2021 最新最全的前端面试题集锦查看. CSS-当前主流的三种预编译器什么是预编译器: CSS ...
CSS预处理器——Sass、LESS和Stylus区别及联系
一.什么是CSS预处器 CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作.通俗的说 ...
css预处理器sass/scss入门
sass/scss入门一.css预处理器是什么? 二.为什么要用css预处理器? 三.sass.less.stylus的区别? 四.sass与scss 五.sass安装六.sass常见用法 6.1 ...
一、SASS(SCSS)
文章目录一.为什么有出现css预处理器二.css预处理器(Sass/Scss.Less......)是什么? 三.Sass和Scss的关系四.配置Sass编译环境五.Sass语法拓展 5.1 ...
预处器的对比——Sass、LESS和Stylus
本文根据Johnathan Croom的<Sass vs. LESS vs. Stylus: Preprocessor Shootout>所译,整个译文带有我们自己的理解与思想,如果译得不 ...
CSS预处理器的对比 — Sass、Less和Stylus
本文根据Johnathan Croom的<sass vs. less vs. stylus: Preprocessor Shootout>所译,整个译文带有我们自己的理解与思想,如果译得不 ...

Vue 应用 Sass、Scss、Less 和 Stylus

Vue 应用 Sass、Scss、Less 和 Stylus相关推荐

最新文章

热门文章