如何在 Nativescript Vue 中导入 scss 文件？答案

【问题标题】：How do I import scss file in Nativescript Vue?如何在 Nativescript Vue 中导入 scss 文件？
【发布时间】：2019-03-12 16:59:35
【问题描述】：

在app.scss文件中，我导入css如下：

@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/elements/button.sass";

即使通过删除../node_modules/ 进行了尝试，css 仍然无法正常工作。样式根本不适用。请帮忙。

【问题讨论】：

您的浏览器不支持 SASS/SCSS。必须先编译成 CSS 再导入。
您似乎正在尝试导入 bulma 源代码？你有什么改变吗？如果没有，您可以只包含 bulma .css 文件。
在包名前尝试~。类似@import "~bulma/sass/utilities/_all.sass"; 我希望你的 webpack 配置更新以支持 sass。
即使我使用bulma.css也不行！样式根本不适用。

【解决方案1】：

Bulma 不适用于 NativeScript-Vue。

NativeScript 有自己的组件和 CSS 属性。 NativeScript 不是 HTML，也不是普通的 CSS（即使有时它们非常相似）。有些事情可以起作用，但我不会遵循这条路线。如果不出意外，因为它会加载一堆未使用的 CSS。

即便如此，从node_modules 到@import CSS/SCSS 的正确方法，假设你有默认的 webpack 配置，应该是：

@import "~bulma/sass/utilities/all";
@import "~bulma/sass/elements/button";

【讨论】：