我在 vue.js 项目中有一些 SASS 变量:

$link_height_1: calc(25vw + 10.4vh - 32px);
$rel_height_1: calc(25vw + 14.5vh - 32px);
$desc_rel_height: 32vh;

然后我通过计算上述三个来获得这个变量:

$bg_rel_height_1: calc(100vh - #{$link_height_1} - #{$rel_height_1} - #{$desc_rel_height});

运行npm run serve我得到了正确的结果:

height: calc(100vh - (calc(25vw + 10.4vh - 32px)) - (calc(25vw + 14.5vh - 32px)) - (32vh));

但是在运行npm run build ,结果是:

height: calc(100vh - 25vw + 10.4vh - 32px - 25vw + 14.5vh + 32px - 32vh);

我不明白为什么会有这种差异。 有没有其他人有过这样的经历?

  ask by Andrea translate from so

本文未有回复,本站智能推荐:

1回复

可以在 Vue 3 项目中安装 sass-loader

我正在尝试在使用 vue CLI 创建项目后添加 sass/scss 加载程序。 我运行了这个脚本: $ npm install -D sass-loader@^10 sass并且我收到以下错误: 它在我为测试这个而创建的空项目中对我有用。 但在我的项目中不起作用。 我使用的是 Ubuntu 2
1回复

npm install -D sass-loader node-sass Vue.js 2021

嗨,问题是为我运行的 Vue.js 设置 SASS:Node.js - 15.7.0 Vue.js - @vue/cli 4.5.11 这是我在运行此命令时遇到的控制台错误: npm install -D sass加载器节点sass
8回复

Sass 加载程序错误:与 API 架构不匹配的无效选项对象

我将 VueJS 与框架VuetifyJS (v2.0.19) 一起使用。 运行npm run serve后出现此错误: Sass Loader 已使用与 API 架构不匹配的选项对象进行初始化。 我尝试过的:我删除了node_modules文件夹并将所有 npm 包和 node.js
1回复

使用 NPM node-sass 查看 SASS 文件

我安装了 node-sass 并设置了选项,如使用 node-sass watch option with npm run-script的底部响应,但是,它似乎对我不起作用。 这是我最近尝试的package.json文件: 所以我试过: 和: 和: 和(如 sidthesloth
2回复

使用ExtractTextPlugin转换为CSS

我一直想将我的SCCS代码处理为单独文件中的CSS,并为此进行了安装,我已经安装了ExtractTextPlugin(已经安装了CSS-loader,node-sass,sass-loader和style-loader)。 然后我将此代码添加到配置中: 然后我尝试使用npm ru
1回复

SASS:在应用程序之间共享

上下文:聚合多个反应应用程序的网络平台。 每个应用程序都有其 .scss 文件。 我想以某种方式提取常见的 .scss(可能在图书馆中?)。 关于如何实现这一目标的任何想法? 值得一提的是:我已经有一个用于共享组件的私有库。
2回复

无法 npn 运行 sass

我在文件夹C:\\Users\\borka\\Desktop\\Courses\\HTML & CSS (Traversy)\\Sandbox\\13_sass ,使用C:\\Users\\borka\\Desktop\\Courses\\HTML & CSS (Traversy)\
1回复

sass文件未由gulp编译

我想从更少的切换到sass,所以我用npm安装了gulp-sass并修改了我的gulpfile以编译sass而不是更少(没有其他更改)。 遗憾的是,gulp不能将我的.scss文件编译为css,并且在谷歌搜索并尝试了所有我认为可能的文件后,仍然无法编译。 这是我可以向您显示的所有信息: