Vue进阶(幺柒柒):Vue应用Sass、Scss、Less和Stylus

Alex799 等级 731 0 0

Vue项目中使用预处理器,可以有效减少css代码量, 推荐使用SassScssLess预处理器。可以在创建项目的时候选择预处理器 (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)

主要是两种

1.对于写在vue文件中的less:

所有vue文件的<style lang="less"></style>,会被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> 
```

2.对于外部less文件:

一是在main.jsimport style.less

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

二是在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` 的处理规则了。

[](https://shq5785.blog.csdn.net/article/details/114239396)注
------------------------------------------------------------

如碰到下面错误

Module build failed: TypeError: this.getResolve is not a function at Object.loader (F:\code\myGit\vue\node_modules\sass-loader\dist\index.js:52:26)


因`sass-loader`版本过高,`webpack`编译失败,解决方法:

修改`sass-loader` 版本(`^8.0.0 => ^7.3.1`)

npm install sass-loader@7.3.1 --save

```

拓展阅读

本文转自 https://shq5785.blog.csdn.net/article/details/114239396,如有侵权,请联系删除。

收藏
评论区

相关推荐

一张图教你快速玩转vue-cli3
前言 本文系统的梳理了vuecli3搭建项目的常见用法,目的在于让你快速掌握独立搭建vue项目的能力。你将会了解如下知识点: 如何安装项目插件 添加浏览器支持 如何配置scss/stylus共享全局变量 如何整合elementUI等第三方框架并实现按需引入 配置单/多页面 如何配置自定义环境变量 如何在vue.config.js定制自己的we
Vue进阶(幺柒柒):Vue应用Sass、Scss、Less和Stylus
Vue项目中使用预处理器,可以有效减少css代码量, 推荐使用Sass、Scss、Less预处理器。可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选择,内置的 webpack 仍然会被预配置为可以完成所有的处理,也可以手动安装相应的 webpack loader: Sassnpm
Vue进阶(幺柒陆):CSS预编译语言Sass、Scss、Less和Stylus
什么是CSS预处理器CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码
一篇文章带你使用Typescript封装一个Vue组件
搭建项目以及初始化配置vue create tsvuebtn 这里使用了vue CLI3自定义选择的服务,我选择了ts、stylus等工具。然后创建完项目之后,进入项目。使用快捷命令code .进入Vs code编辑器(如果没有code .,需要将编辑器的「bin文件目录地址」放到环境变量的path中)。然后,我进入编辑器之后,进入设置工作区,随便设置一个
「Vue — css」使用sass/scss并定义全局变量
1:安装sassnode languagecnpm install sassnode save dev 2:安装sassloader languagecnpm install sassloader save dev3:在vue.config.js中进行配置 languagemodule.exports css: loaderOptions: s
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注
SASS和LESS等优缺点对比,使用方法总结 (笔记大全)
### sass优点: 用户多,更容易找到会用scss的开发,更容易找到scss的学习资源; 可编程能力比较强,支持函数,列表,对象,判断,循环等; 相比less有更多的功能; Bootstrap/Foundation等使用scss; 丰富的sass库:Compass/Bourbon; ### sass缺点: 在公司内部安装node-sass会失败,需
2016我的心路历程:从 Vue 到 Webpack 到 iView
> 2016年工作中做过最自豪的两件事情: * 把 Vue.js 和 Webpack 技术栈引进公司并逐步成为前端规范; * 开源 [iView](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fiview%2Fiview) 项目。 初识 Vue ===
2016我的心路历程:从 Vue 到 Webpack 到 iView
> 2016年工作中做过最自豪的两件事情: * 把 Vue.js 和 Webpack 技术栈引进公司并逐步成为前端规范; * 开源 [iView](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fiview%2Fiview) 项目。 初识 Vue ===
Netbeans与基于libsass的SASS编译器不兼容的解决办法
问题 == > Could not find an option named "cache-location". 如果你在Netbeans 10、11、12上使用基于libsass的任何一款SASS编译器来编译scss文件,比如来自[](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fs
React的Sass配置
React提供的脚手架[creact-react-app](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Ffacebook.github.io%2Fcreate-react-app%2Fdocs%2Fadding-a-sass-stylesheet)创建的工程文件不像vue那种暴露出web
Sass预编译
sass基于Ruby               ruby的模块管理器叫gem   正规的安装方式是gem install sass                调用命令     sass    sass文件    css文件 **webpack编译sass**         需要的模块 style-loader  css-loader  sas
Vue CLI 3搭建vue+vuex 最全分析
一、介绍 ==== Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件: **CLI**:`@vue/cli` 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令) **CLI 服务**:`@vue/cli-service`是一个开发环境依赖。构建于 [we
Vue 兼容 ie9 的全面解决方案
前言 -- **背景情况** * vue - 2.5.11 * vue-cli 使用模板 `webpack-simple` * http请求:axios Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架 `vuejs` 本身,以及生态的官方核心插件(VueRouter、V
stylus基础教程,stylus实例教程,stylus语法总结
stylus特点 富于表现力、具有健壮性、功能丰富、动态编码 不需要写CSS的冒号、分号、大括号 和LESS、SASS功能类似,会这些的入手很快 stylus特点 安装 使用 stylus语法 (一)选择器 (二)变量 (三)插值 (四)运算符 (五)内置函数 (六)尾参数… (七)@extend继承