在 vue-cli v3.0 中使用 SCSS/SASS的方法

在项目中使用 SCSS/SASS 进行样式编写无疑会节省很多开发样式的时间。关于如何在 vue-cli v3.0 中使用 SCSS/SASS，这里提供三种方案。前提是在使用 vue-cli 生成项目时勾选了 CSS Pre-processors (CSS预处理器)，否则无法在项目中直接使用。

方案一：在组件中直接使用

在组件中直接使用 SCSS/SASS 是最简单的方式：

<style lang="scss" scoped>
</style>

通过 lang 选项可以选择使用的语法： scss/sass。如果希望样式能够在全局范围内生效，就将 scoped 删除。

方案二：在组件中导入 .scss 文件

有时候我们可能想定义一个通用的 scss/sass

我们可以在项目目录中创建一个 .scss 文件，比如一些只想在特定组件中使用的通用样式或是一些 scss 变量等。

我们可以在组件中使用 @import 进行样式导入，例如：

@import '../src/static/common.scss';

注意路径不要写错了。而且这种方案的前提是在导入组件中使用了 方案一 。否则的话 .scss 不可能直接在普通 css 样式表中进行编译，需要保持样式表格式的统一。

方案三：使用全局 scss/sass 文件

如果你希望定义一下全局能够使用的 scss 样式，首先需要创建一个 .scss 文件，然后在项目的 main.js 中使用 import 命令就像导入模块一样，将独立 .scss 文件全局导入项目。

import "./static/common.scss";

总结

以上所述是小编给大家介绍的在 vue-cli v3.0 中使用 SCSS/SASS的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 10分钟上手vue-cli 3.0 入门介绍

    环境安装 全新版本的脚手架.逼格非常高. 记住这个名字 @vue/cli ,对就是这个 你npm 或者yarn 安装就行了,先保证全局环境有它. npm install -g @vue/cli yarn add global @vue/cli 创建项目 这里对比下以前2.X之前的版本 ,新版本把插件以及模板等 移植到命令行界面了. 旧版 创建命令 2.x vue init <template-name> <project-name> 3.x vue create <proje

  • Vue-cli@3.0 插件系统简析

    Vue-cli@3.0 插件系统简析

    Vue-cli@3.0 是一个全新的 Vue 项目脚手架.不同于 1.x/2.x 基于模板的脚手架,Vue-cli@3.0 采用了一套基于插件的架构,它将部分核心功能收敛至 CLI 内部,同时对开发者暴露可拓展的 API 以供开发者对 CLI 的功能进行灵活的拓展和配置.接下来我们就通过 Vue-cli@3.0 的源码来看下这套插件架构是如何设计的. 整个插件系统当中包含2个重要的组成部分: @vue/cli,提供 cli 命令服务,例如vue create创建一个新的项目: @vue/cli-

  • 快速了解vue-cli 3.0 新特性

    vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具,具有开箱即用并且提供简洁的自定义配置等功能. vue-cli 从 2.0 到 3.0 的升级有太多的新东西可以说了,但是不可能在本文中列举所有的内容,这篇文章作为一个对比 2.0 升级功能的导读,让你快速了解 3.0 更新的内容. 一.创建项目: 创建项目命令的变化. vue create my-project 3.0 版本包括默认预设配置 和 用户自定义配置. 自定义功能配置包括以下功能: TypeScript P

  • vue-cli3.0使用及部分配置详解

    好长一段时间没有关注vue脚手架了,昨天因为需要个后台模板,用脚手架 搞了一下,竟然发现指令不能用了,看官方文档已经升级3.0,也是试的玩了一下, 大致写写怎么玩的! 1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个 在选择功能后,会询问更细节的配置, TypeScript: 是否使

  • 浅谈vue-cli 3.0.x 初体验

    最近项目正在优化.乘着有时间看了一下 vue-cli3.0.x 使用 .感觉还蛮不错的. 因为之前项目使用的 vue-cli 2 创建的,强行使用 eslint让我们很难受,一些与项目无关的 "build" 和 "config" ,让人看着就有一些不爽 .由于公司环境比较多,需要测试环境的配置.增加了 ""tt": "node build/tt-build.js"" .到 3.0.x 应该怎么用? 带着这些

  • vue-cli3.0 特性解读

    vue-cli3.0 特性解读

    最近的开发项目中使用了vue-cli 3.0,使用体验可以说非常棒了,模板更加制定化,配置更加简洁.以下总结下应用过程中的一些经验. 新建项目 # 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run serve # 打包 npm run build 打包后的文件,对引用资源注入了预加载(preload/prefetch),启用 PWA 插件时注入 manifest/icon 链接,并且引入(inlines)

  • vue-cli项目中使用echarts图表实例

    vue-cli项目中使用echarts图表实例

    我们在项目中经常需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网 现在的前端一般需要完成将大量的数据,实现可视化.现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势.而ECharts和d3.js则是可视化的成熟框架.对于制作的图表可以说是满足你的创造力. 两者相比,D3 它

  • 使用Vue-cli 3.0搭建Vue项目的方法

    使用Vue-cli 3.0搭建Vue项目的方法

    1. 环境准备 1.1. 安装Node.js (建议使用LTS版本) 1.2. nrm安装及npm registry设置 // use npm npm i nrm -g // use yarn yarn global add nrm 查看可用的npm源 nrm ls nrm查看npm源.png 切换npm源(以使用taobao为例) // 用法: nrm use *** nrm use taobao // 切换之后可用 nrm ls查看是否已经切换了npm源 nrm切换npm源.png 1.3.

  • vue cli3.0结合echarts3.0与地图的使用方法示例

    vue cli3.0结合echarts3.0与地图的使用方法示例

    前言 echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的一个小的echarts demo,我在使用npm的时候对比了echarts和vue-echarts两个依赖,最后决定使用echarts依赖包,因为它更接近原生,使用现实更小,如果对vue生命周期比较了解,那就更容易操作. 下面讲一下做出这样一个echarts图.话不多说了,来一起看看详细的介绍

  • 详解如何配置vue-cli3.0的vue.config.js

    本文介绍了如何配置vue-cli3.0的vue.config.js,分享给大家,具体如下: vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍) vue

随机推荐