vue-cli 3中dart-sass替换node-sass

小灰灰 2021-09-07 06:19 1036阅读 0赞

Facebook 重构：抛弃 Sass / Less ，迎接原子化 CSS 时代！使用dart-sass代替node-sass，不管你是否使用dart-sass，建议你使用::v-deep的写法，它不仅兼容了 css 的>>>写法，还兼容了 sass /deep/的写法  
而且它还是 vue 3.0 中指定的写法。而且原本 /deep/ 的写法也本身就被 Chrome 所废弃

使用方法

为什么要替换?  
node-sass仓库在墙外, 且新特性都会先在dart-sass实现

怎么替换?  
1.卸载 node-sass

// npm
     npm uninstall node-sass
     
    // yarn
     yarn remove node-sass

2.安装 dart-sass

// npm 
     npm install --dev sass
    
    // yarn
     yarn add sass --dev

4.更新 vue.config.js 文件

// vue.config.js
    module.exports = {
      css: {
        loaderOptions: {
          sass: {
            implementation: require('sass'), // This line must in sass option
          },
        },
      }
    }

一般默认文件里是没有这个css配置的, 添加进去就好.

5.全局搜索 /deep/ , 将项目里的 /deep/ 替换为 ::v-deep  
6.如果你用了 stylelint , 那可能需要修改下校验规则

// stylelint.config.js
        module.exports = {
          ...
          rules: {
            'selector-pseudo-element-no-unknown': [
              true,
              {
                ignorePseudoElements: ['v-deep'],
              },
            ],
          },
          ...
        };

如果vue3.0之前vue2.0你使用了/deep/ 没有替换 将会报错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210813/2cab58dd53644a259d1f060fd2113b91.png

发表评论取消回复

表情：

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

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

相关阅读

相关 vueCli3 身份证正则校验

js / @Description:身份证校验规则. / //校验身份证号 export function isIdentity

秒速五厘米/ 2023年10月03日 00:47/ 0 赞/ 7 阅读

相关 vuecli3.0全局引入jquery

之前使用jquery都是每个组件引入 import $ from 'jquery' 这种方式需要在每个要使用jquery的组件里面引入一下，比较麻烦，分享一下全局引

约定不等于承诺〃/ 2023年06月15日 09:53/ 0 赞/ 7 阅读

相关 vuecli3.0 配置vue-router

安装直接在命令行打开项目目录然后输入以下代码进行安装 npm install vue-router 配置路由 1.使用`router-view`标签设

布满荆棘的人生/ 2023年06月15日 09:49/ 0 赞/ 155 阅读

相关 vuecli3 多页面配置

vuecli3 多页面配置项目结构 1. login文件配置（有配置路由） login文件目录 lo

落日映苍穹つ/ 2023年01月19日 03:24/ 0 赞/ 420 阅读

相关快速部署vuecli3 vuecli搭建 vuecli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2022年12月22日 11:07/ 0 赞/ 323 阅读

相关 VueCli3.0 rem 适配不同分辨率

npm install postcss-px2rem px2rem-loader --save utils / rem.js const baseSiz

逃离我推掉我的手/ 2022年10月06日 12:45/ 0 赞/ 221 阅读

相关 vuecli4中关闭Eslint

元气满满，直接干！如果在创建项目时选择了eslint，而你又无法驾驭它，噩梦就开始。各种报错，让你非常难受！这时我们就要关闭eslint，过程非常简单。 1. 在项目

「爱情、让人受尽委屈。」/ 2022年09月02日 00:45/ 0 赞/ 347 阅读

相关 vuecli4中配置服务器

元气满满，直接干！在使用vuecli4开发项目时，如果需要自己开发服务器测试项目，单独编写一个服务器，非常难受！这时，我们可以在vuecli4中直接进行服务器开发。过

女爷i/ 2022年09月02日 00:44/ 0 赞/ 285 阅读

相关 Vuecli3+express实现跨域

目录一，本地跨域二，线上跨域 -------------------- 一，本地跨域首先，本地服务器地址开放的是3000端口，云服务器上开发的是4

阳光穿透心脏的1/2处/ 2021年07月25日 17:22/ 0 赞/ 662 阅读

相关 VueCli3中加载Cesium.js

更多Cesium示例代码：[https://sandcastle.cesium.com/][https_sandcastle.cesium.com] 首先下载Cesium.

缺乏、安全感/ 2021年07月25日 11:54/ 0 赞/ 1463 阅读