在 Nuxt 中使用最新的 SASS 和@use

Question

我想在我的项目中使用 sass。我安装了“node-sass”和“sass-loader”，我可以使用导入、变量和其他 sass 的未来，但我不能将“@use”用于使用@mixin 或@function.

"dependencies": {
    "@babel/core": "^7.14.3",
    "babel-loader": "^8.2.2",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3",
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "jquery": "^3.4.1",
}
 "devDependencies": {
    "@nuxtjs/pwa": "^3.3.5"
    "node-sass": "^4.12.0",
    "sass-loader": "^10.1.1"
}

我的代码： grid.scss

@use 'sass:meta';
@use 'sass:map';
@use './config';

@mixin col($ratio) {
  flex: 0 0 $ratio;
  max-width: $ratio;
}

@mixin grid($from, $size, $cols) {
  $breakpoint-size: map.get(config.$breakpoint-sizes, $from);

  @media (min-width: $breakpoint-size) {
    .grid-#{$from}-#{$size} {
      display: flex;
      flex-wrap: wrap;

      @each $col in $cols {
        > .col-#{$from}-#{$col} {
          @include col(math.percentage($col / $size));
        }
      }
    }
  }
}

@mixin grids($grid-definitions...) {
  @each $breakpoint, $grid-definition in meta.keywords($grid-definitions) {
    @if not map.has-key(config.$breakpoint-sizes, $breakpoint) {
      @error '"#{$breakpoint}" must be one of (#{config.$breakpoints}).';
    }

    @if not map.has-key($grid-definition, size) {
      @error '"#{$breakpoint}" grid must have a "size" key.';
    }

    @if not map.has-key($grid-definition, cols) {
      @error '"#{$breakpoint}" grid must have a "cols" key.';
    }

    @include grid(
      $from: $breakpoint,
      $size: map.get($grid-definition, size),
      $cols: map.get($grid-definition, cols)
    );
  }
}

使用：

@use "assets/scss/grid";
    @include grid.grids(
      $xs: (
        size: 1,
        cols: (1)
      ),
      $md: (
        size: 2,
        cols: (1)
      ),
      $xl: (
        size: 4,
        cols: (1)
      ),
      $xxl: (
        size: 5,
        cols: (1)
      ),
    );

错误：

in ./pages/sign-in/index.vue?vue&type=style&index=0&id=d2289462&lang=scss&scoped=true& (./node_modules/.pnpm/css-loader@4.3.0_webpack@4.46.0/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/.pnpm/vue-loader@15.9.7_559ffc97fd41de05d12663d7fb949156/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/.pnpm/postcss-loader@3.0.0/node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/.pnpm/sass-loader@10.2.0_node-sass@4.14.1/node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/.pnpm/vue-loader@15.9.7_559ffc97fd41de05d12663d7fb949156/node_modules/vue-loader/lib??vue-loader-options!./pages/sign-in/index.vue?vue&type=style&index=0&id=d2289462&lang=scss&scoped=true&) Module build failed (from ./node_modules/.pnpm/sass-loader@10.2.0_node-sass@4.14.1/node_modules/sass-loader/dist/cjs.js): SassError: Invalid CSS after "@include grid": expected 1 selector or at-rule, was ".grids(" on line 125 of pages/sign-in/index.vue @include grid.grids(

我安装了sass yarn add -D sass然后问题就解决了但是我在终端有一些错误，我认为此错误是针对 bootstrap，但我不知道如何修复这些错误。

Answer 1

好的，安装正确的 dart 包 (sass) 解决了它，因为 explained here。

然后，我们需要更新弃用警告，大部分都在这里详细说明：https://sass-lang.com/documentation/breaking-changes

关于警告，您可以：

查看您正在使用的 Bootstrap 软件包并在他们的 Github 问题
尝试拥有自己的软件包版本（IMO 不是一个好主意）
忽略它，因为它是一个警告，它不是阻止程序。这将是 v2.0.0 的一个问题，但截至目前，他们的最新消息还没有那么接近所以我想这不会在某个好时机之前发生

在 Nuxt 中使用最新的 SASS 和@use

Use latest SASS with @use in Nuxt

sass

less

vue.js

nuxt.js