项目中安装并使用scss.(node-sass安装失败版)

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

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

0. 确保已经安装了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-lang.com/install

1. 在Vue项目的根目录中，创建一个vue.config.js文件（如果尚未存在）。

2. 在vue.config.js中添加以下代码：

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

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

3. 在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文件，并使其可用于所有组件。

4. 在global.scss文件中定义全局的SCSS样式，例如：

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

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

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