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

Posted

技术标签:

【中文标题】在 Nuxt 中使用最新的 SASS 和 @use【英文标题】:Use latest SASS with @use in Nuxt 【发布时间】:2021-10-09 06:22:59 【问题描述】:

我想在我的项目中使用 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"


我的代码: 网格.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)
      ),
    );

错误:

在 ./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&) 模块构建失败(来自 ./node_modules/.pnpm/sass-loader@10.2.0_node-sass@4.14.1/node_modules/sass-loader/dist/cjs.js): SassError:“@include 网格”之后的无效 CSS:预期 1 个选择器或规则,是“.grids(” 在 pages/sign-in/index.vue 的第 125 行 @include 网格.grids(

我安装了 sass yarn add -D sass 然后问题解决了,但是我在终端出现了一些错误, 我认为这个错误是针对引导程序的,但我不知道如何修复这些错误。


【问题讨论】:

据我所知,如果你想使用最新的 SASS,你需要安装 dart-sassyarn add -D sass 而不是通常的 node-粗鲁。 github.com/sass/dart-sass#from-npm 这行得通,但我“省略了 86 条重复弃用警告”。我的终端中的警告@kissu 【参考方案1】:

好的,安装正确的 dart 包 (sass) 解决了它,就像 explained here。

然后,我们需要更新弃用警告,其中大部分都在此处详细说明:https://sass-lang.com/documentation/breaking-changes

至于警告,您可以:

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

【讨论】:

对于引导错误,我使用了最新版本的引导(5.0.2)并修复了错误。

以上是关于在 Nuxt 中使用最新的 SASS 和 @use的主要内容,如果未能解决你的问题,请参考以下文章

有没有办法在 Nuxt.js 中使用 sass 而不是 node-sass(默认为 sass-loader)?

将 json 数据作为 .scss 文件中的 sass 变量导入 Nuxt

SCSS/SASS 文件不适用于电子 nuxt

nuxt.config.js文件

Vuetify SASS 无法使用 Nuxt 正确编译

如何在Nuxt项目中使用.vue文件做自动前缀处理?