少年郎,当你刷到我这篇文章的时候,估计你安装使用scss的时候出现了问题,比如安装的node-sass失败.好了,现在开始,忘记node-sass,拥抱dart-sass. 直接安装使用.和原本使用无区别.

要在Vue项目中全局引入Dart Sass,可以按照以下步骤操作:

  1. 确保已经安装了Dart Sass。可以在终端中运行以下命令来检查:

     sass --version  
     如没下载则运行以下代码
     yarn add dart-sass
     yarn add sass-loader@7.1.0
     yarn add sass-loader
     yarn add fibers 

    如果没有安装Dart Sass,可以参考官方文档进行安装:Sass: Install Sass

  2. 在Vue项目的根目录中,创建一个vue.config.js文件(如果尚未存在)。

  3. 在vue.config.js中添加以下代码:

     module.exports = {
       css: {
         loaderOptions: {
           sass: {
             implementation: require("sass"),
             sassOptions: {
               fiber: require("fibers")
             }
           }
         }
       }
     };

    这将告诉Vue使用Dart Sass编译SCSS文件。此外,还需要安装fibers,它是一个Node.js模块,可以加快Sass的编译速度。

  4. 在Vue项目的main.js文件中导入全局的SCSS文件,例如:

     import Vue from "vue";
     import App from "./App.vue";
     import "@/assets/scss/global.scss";
     ​
     Vue.config.productionTip = false;
     ​
     new Vue({
       render: (h) => h(App),
     }).$mount("#app");

    这将在Vue项目中全局引入global.scss文件,并使其可用于所有组件。

  5. 在global.scss文件中定义全局的SCSS样式,例如:

     $primary-color: #007bff;
     ​
     body {
       background-color: #f8f8f8;
     }
     ​
     .btn-primary {
       background-color: $primary-color;
       color: #fff;
       border: none;
     }

    这将定义全局的SCSS变量和样式,可以在所有组件中使用。

希望这些步骤能够帮助您在Vue项目中全局引入Dart Sass。

GitHub 加速计划 / no / node-sass
11
0
下载
:rainbow: Node.js bindings to libsass
最近提交(Master分支:4 个月前 )
6081731a Bumps [actions/setup-node](https://github.com/actions/setup-node) from 3 to 4. - [Release notes](https://github.com/actions/setup-node/releases) - [Commits](https://github.com/actions/setup-node/compare/v3...v4) --- updated-dependencies: - dependency-name: actions/setup-node dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> 1 年前
62c0f46c Bumps [actions/checkout](https://github.com/actions/checkout) from 3 to 4. - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](https://github.com/actions/checkout/compare/v3...v4) --- updated-dependencies: - dependency-name: actions/checkout dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐