【vue】vue项目中使用scss。具体的步骤和配置如下

Myth丶恋晨 2023-08-17 17:35 155阅读 0赞

详细的安装步骤如下：

### （1）安装如下依赖： ###

npm install node-sass --save //安装node-sass 
    npm install sass-loader --save //安装sass-loader 
    npm install style-loader --save //安装style-loader

### （2）在 build / webpack.base.conf.js文件里面做如下修改：（添加） ###

rules: [{
            test: /\.scss?$/,
            loaders: ['style', 'css', 'sass']
    }]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

（3）在模板中使用：

<style lang="scss" scoped>
    // 写入scss文件
    </style>

（4）运行项目试着看下。

可能会如下有报错，TypeError: this.getResolve is not a function，具体解决办法见[https://blog.csdn.net/Miss\_liangrm/article/details/101866824][https_blog.csdn.net_Miss_liangrm_article_details_101866824]。

\----------完。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: /images/20230808/010dcceddc4e40b6a35db6d2c1f4dd3b.png
[https_blog.csdn.net_Miss_liangrm_article_details_101866824]: https://blog.csdn.net/Miss_liangrm/article/details/101866824

发表评论取消回复

表情：

评论列表（有 0 条评论，155人围观）

还没有评论，来说两句吧...

相关阅读

相关 linux中安装Nginx的具体步骤

1.首先介绍一下Ngnix nginx是一款使用c语言编写的高性能的HTTP和反向代理服务器，特点是占有内存少，并发能力强，事实上Nginx的并发能力确实在同类型的网页服

迈不过友情╰/ 2024年03月17日 15:19/ 0 赞/ 64 阅读

相关 node.js具体项目搭建步骤

生成后台目录结构并安装热更新生成目录结构 1. 安装目录生成器： npm install express-generator -g 2. 生成一

野性酷女/ 2023年10月10日 09:39/ 0 赞/ 22 阅读

相关【vue】vue项目中使用scss。具体的步骤和配置如下

详细的安装步骤如下：（1）安装如下依赖： npm install node-sass --save //安装node-sass npm instal

Myth丶恋晨/ 2023年08月17日 17:35/ 0 赞/ 156 阅读

相关在VUE项目中使用SCSS ，对SCSS的理解和使用（简单明了）

首先要了解什么是CSS 预处理器？ SCSS是一种CSS预处理语言定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览

蔚落/ 2023年07月06日 13:16/ 0 赞/ 13 阅读

相关 uni-app项目中使用scss语法

最简单的方法如下：点击菜单栏中的“工具 – 插件安装 – scss/sass编译” 点击安装，如果成功了，就可以正常使用了。第一步：工具 – 插件安装 ![w

àì夳堔傛蜴生んèń/ 2023年03月01日 09:28/ 0 赞/ 16 阅读

相关 Nuxt.js项目使用 scss

Nuxt.js项目使用 scss 直接安装依赖就可以使用啦 npm i node-sass sass-loader scss-loader --save-dev

た入场券/ 2022年12月19日 11:49/ 0 赞/ 338 阅读

相关【springboot中使用aop的具体步骤和示例】

1.依赖 <dependency> <groupId>org.springframework.boot</groupId>

秒速五厘米/ 2022年09月04日 04:54/ 0 赞/ 185 阅读

相关 SCSS和LESS的使用

一. Sass/Scss、Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，

爱被打了一巴掌/ 2022年02月18日 09:17/ 0 赞/ 446 阅读

相关 SonarQube---在具体项目中的使用

一、简介 SonarQube（简称Sonar）是管理代码质量的开放平台，它可以快速地对代码质量进行分析，并给出合理的解决方案，提高管理效率，保证代码质量。 [Sonar

短命女/ 2021年11月10日 12:58/ 0 赞/ 388 阅读

相关在VUE项目中使用SCSS ，对SCSS的理解和使用（简单明了）

首先要了解什么是CSS 预处理器？ SCSS是一种CSS预处理语言定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览

怼烎@/ 2021年09月15日 16:42/ 0 赞/ 589 阅读