vue项目中使用scss的方法步骤

2024-10-20 21:44:07

一概述

随着sass/less等css预处理器的出现，编写css变的越来越有乐趣。所以现在越来越多的人在项目中喜欢使用scss或者less。（我自己就是一个）。由于最近在写一个vue项目。所以就把写项目期间每天的一些知识点写在博客里。所以最近的博客应该都会和vue有关。今天要和大家分享的就是如何在vue项目中引入scss（引入less也类似）

二 vue中引入scss

2.1 vue-loader

在讲如何在vue项目中使用scss之前，我们先来简单了解一个概念，那就是vue-loader。vue-loader是什么东西呢？vue-loader其实就是一个webpack的loader。用来把vue组件转换成可部署的js,html,css模块。所以我们如果要想再vue项目中使用scss,肯定要告诉vue-loader怎么样解析我的scss文件。

不了解webpack的同学可以先去自行百度。我这里就放一张图，看完大家可以也就能知道webpack能做些什么事情了。

2.2 loader配置

在webpack中，所有预处理器都要匹配相应的loader,vue-loader允许其他的webpack-loader处理组件中的一部分吗，然后它根据lang属性自动判断出要使用的loaders。所以，其实只要安装处理sass/scss的loader。就能在vue中使用scss了。

现在我们来安装sass/scss loader

npm install sass-loader node-sass --save-dev

2.3 为什么无需配置

我们前面说到,vue-loader允许能根据lang属性自动判断出要使用的loaders。它是怎么样做到的？有这么神奇嘛？我们下面来看一看最核心部分的源代码

exports.cssLoaders = function (options) {
 options = options || {}

 var cssLoader = {
  loader: 'css-loader',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   sourceMap: options.sourceMap
  }
 }

 // generate loader string to be used with extract text plugin
 function generateLoaders (loader, loaderOptions) {
  var loaders = [cssLoader]
  if (loader) {
   loaders.push({
    loader: loader + '-loader',
    options: Object.assign({}, loaderOptions, {
     sourceMap: options.sourceMap
    })
   })
  }

  // Extract CSS when that option is specified
  // (which is the case during production build)
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

 // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }
}

就是上述这段代码让vue-loader有了这种能力，它会根据不同的文件去使用不同的loader

2.4 使用scss

这样你就可以愉快的使用scss了。

<style scoped lang="sass">
   xxxx
   xxxx
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解Vue 全局引入bass.scss 处理方案

为解决在Vue组件中全局引入 scss 变量及 mixins ,装载了一个名为 "sass-resources-loader" 解析器. 安装 $ > cnpm i -D sass-resources-loader 配置配置的话是在 vue 的 loader 解析器中配置,即在 vue-cli 脚手架方式构建出来的文件中是以 build/utils.js,在该文件中定义了 cssLoaders() 方法,该方法定义了诸如 css.less的解析方式,具体如下. // build
在 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 选
详解Vue2 添加对scss的支持

引入loader cnpm install node-sass --save-dev cnpm install sass-loader --save-dev cnpm install style-loader --save-dev scss支持为了使用scss,我们需要先安装相关的node包: npm install --save style-loader sass-loader node-sass file-loader 安装好之后,为了可以在.vue和.scss中使用,需要在webpack
vue安装和使用scss及sass与scss的区别详解

1. 安装依赖:npm install node-sass sass-loader -D 2. webpack.base.conf.js文件 module: { { //手动添加这一条,相当于是编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"]} } 3. 在.vue文件中使用 <style scoped lang="scss"> .box{ w
vue项目中使用scss的方法步骤

一概述随着sass/less等css预处理器的出现,编写css变的越来越有乐趣.所以现在越来越多的人在项目中喜欢使用scss或者less.(我自己就是一个).由于最近在写一个vue项目.所以就把写项目期间每天的一些知识点写在博客里.所以最近的博客应该都会和vue有关.今天要和大家分享的就是如何在vue项目中引入scss(引入less也类似) 二 vue中引入scss 2.1 vue-loader 在讲如何在vue项目中使用scss之前,我们先来简单了解一个概念,那就是vue-loader.v
vue项目中使用tinymce编辑器的步骤详解

Tinymce富文本也是一款很流行编辑器把文件放在static下,然后在index.html文件中引入这个文件 <script src="static/tinymce/tinymce.min.js"></script> <tinymce :height=200 ref="editor" v-model="editForm.fdcNote"></tinymce> 在其他子文件中引入这个 import
vue项目打包发布上线的方法步骤

目录一.开发环境到生产环境的转变二.设置统一的请求路径三.运行打包命令 vue项目开发完成后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目 (以vue-cli脚手架生成的项目为例) 一.开发环境到生产环境的转变项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发路径切换为线上路径. 打开项目中config文件夹里面的 dev.env.js 文件,将后端给的线上路径填入. 'use strict' module.exports = { NODE_E
Vue项目中设置背景图片方法

在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../../assets/head.jpg"); 这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1.在data中定义如下: export default { name: 'productdetailspage', data() {
vue项目中的webpack-dev-sever配置方法

问题描述:在vue项目中运行npm run dev启动服务器,然而在同一个局域网下的外部设备不能该服务器解决方案:在项目的config文件夹下找到index .js中的host把默认的localhost更改为0.0.0.0, 然后外部设备就可以访问该项目启动的服务了(注意必须是在统一局域网下) 以上这篇vue项目中的webpack-dev-sever配置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
vue项目中使用Svg的方法

github demo: github地址闲聊背景本文主要以 vue-cli3 搭建的项目为例,来聊一下如何在项目中更优雅的使用 svg . 众所周知, vue-cli3 已经推出很长一段时间了,大家可以感受一下 vue-cli3 带来的零配置体验.But,也相应带来了一些弊端,就是如归需要修改默认的 loader 时,会比较麻烦. 们接下来主要使用的就是上文中提到的 svg 的 use ,先上一张 vue-cli3 搭建的项目的目录,可以看到根目录下只保留了 public/ 以及 src/
在vue项目中引用Iview的方法

关于 iView iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 特性 # 高质量.功能丰富友好的 API ,自由灵活地使用空间细致.漂亮的 UI 事无巨细的文档可自定义主题 iview 安装 npm install iview --save 引入iview import Vue from 'vue' import App from './App' import router from './router' import iView fro
Vue项目中封装axios的方法

目录一.axios是什么特性基本使用二.为什么要封装三.如何封装设置接口请求前缀设置请求头与超时时间封装请求方法请求拦截器响应拦截器小结参考文献一.axios是什么 axios 是一个轻量的 HTTP客户端基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端.自Vue2.0起,尤大宣布取消对 vue-resource 的官方推荐,转而推荐 axios.现在 axios 已经成为大部分
vue项目中main.js使用方法详解

目录第一部分:main.js文件解析第二部分:Vue.use的作用以及什么时候使用 Vue.use是什么?(官方文档) Vue.use()什么时候使用? 补充:关于main.js方便小技巧总结第一部分:main.js文件解析 src/main.js是入口文件,主要作用是初始化vue实例并使用需要的插件在main.js文件中定义了一个vue对象,其中el为实例提供挂载元素 //基础配置 import Vue from 'vue' import App from './App.vue' /
Vue 项目中Echarts 5使用方法详解

目录前言创建项目基本使用安装使用方法柱状图动态排序柱状图前言 Echarts 是一个纯JavaScript的图表库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. 创建项目先使用vue-cli创建一个新的项目,配置按照自己的需要选择,默认的也可 vue create vue_echarts cd vue_echarts npm run serve 基本使用安装首先安装echarts npm i

vue项目中使用scss的方法步骤

相关推荐

随机推荐