在 Nuxt 中通过 @use 使用最新的 SASS [英] Use latest SASS with @use in Nuxt
问题描述
我想在我的项目中使用 sass.我有节点 sass"和sass-loader"安装后，我可以使用 sass 的导入、变量和其他未来，但我不能使用@use"；用于使用@mixin 或@function.
I want to use sass in my project. I have "node-sass" and "sass-loader" installed, I can use imports, variables, and other future of sass but I can't use "@use" for using a @mixin or @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
my code: 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)
),
);
错误:
ERROR:
在./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/?postsrc-refloader7-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.vuetype?vue&e&;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 grid"之后的 CSS 无效:预期为 1 选择器或规则，是.grids(";在 pages/sign-in/index.vue 的第 125 行@include grid.grids(
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 然后问题解决了，但是我在终端中出现了一些错误，我认为这个错误是针对引导程序的，但我不知道如何修复这些错误.
I installed sass yarn add -D sass then the problem was solved but I have some errors in the terminal,
I think this error is for bootstrap, but I didn`t know how to fix these errors.
推荐答案
好的，安装合适的 dart 包 (sass) 解决了，因为 在此处解释.
Alright, installing the proper dart package (sass) solved it, as explained here.
然后，我们需要更新弃用警告，大部分都在这里详细说明:https://sass-lang.com/documentation/break-changes
Then, we need to update the deprecation warnings, most of them are detailed here: https://sass-lang.com/documentation/breaking-changes
至于警告，您可以:
- 查看您正在使用的 Bootstrap 包，并在他们的 Github 问题中提出问题
- 尝试拥有自己的软件包版本(IMO 不是一个好主意)
- 忽略这一点，因为这是一个警告，而不是阻止程序.这将是
v2.0.0的一个问题，但截至目前，他们的最新版本还没有那么接近，所以我想这不会发生在某个好时机之前
- look into the Bootstrap package you're using and ask the question in their Github issues
- try to have your own version of the package (not a good idea IMO)
- just ignore this, since it's a warning it's not a blocker. It will be an issue at
v2.0.0but as of right now, their latest is still not that close so I guess that this will not happen before some good time
这篇关于在 Nuxt 中通过 @use 使用最新的 SASS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
