为什么vue scss中的未知单词是编译的？
在Vue中使用SCSS时，如果遇到未知的单词，它会被编译器视为变量或混合器，并尝试在SCSS文件中查找该变量或混合器的定义。如果找不到定义，编译器会报错。
这种行为是因为SCSS是一种CSS预处理器，它引入了许多新的特性和语法，例如变量、嵌套规则、混合器等。编译器会将SCSS代码转换为浏览器可以理解的普通CSS代码。在编译过程中，编译器会解析SCSS文件，并根据定义的规则进行相应的转换。
当遇到未知的单词时，编译器会尝试将其解析为变量或混合器。这是因为SCSS允许在使用之前定义变量或混合器，以便在整个样式表中重复使用。如果编译器找不到定义，它会认为这是一个未知的变量或混合器，并报错。
这种设计有助于提高代码的可维护性和重用性。通过使用变量和混合器，我们可以在整个项目中轻松地更改样式，而不必逐个修改每个使用该样式的地方。此外，SCSS还提供了更强大的功能，如嵌套规则和函数，使得样式表的编写更加灵活和高效。
对于Vue项目，腾讯云提供了一系列与前端开发相关的产品和服务，例如云开发（CloudBase）、云函数（SCF）、云存储（COS）等。这些产品可以帮助开发者快速搭建和部署前端应用，并提供稳定可靠的基础设施支持。您可以通过访问腾讯云官网（https://cloud.tencent.com/）了解更多相关信息。
相关·内容
1回答
/prependData/data bloats包大小
vue.js、webpack、sass、vuejs2、laravel-mix
我使用的是Vue2和laravel，我希望我的变量可以在全球范围内访问。我终于找到了这个：
mix.webpackConfig({
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'sass-loader',
options: {
浏览 2提问于2021-07-08得票数 3
1回答
SASS -将scss文件转到main.scss文件以更改main.css。
html、css、sass
我使用的是SASS，我有不同的scss文件来描述我的网页上的布局，比如我的_navbar.scss和_footer.scss文件(还有没有下划线的main.scss文件)。
现在，我想将我的所有布局scss文件引用到我的main.scss，这样我的main.css就可以获得main.scss文件中引用的所有内容的样式。有人知道如何做到这一点，因为@import不再使用了吗？我需要一些扩展或工具吗？
这是HTML代码。
<section class="navbar" id="nav">
<ul>
浏览 1提问于2021-05-13得票数 1
2回答
如果通过ES6-导入语法导入，SCSS无法覆盖默认变量。
javascript、twitter-bootstrap、webpack、sass
试图覆盖项目中的sass默认变量(堆栈是关于sass+babel+webpack的，由vue-cli生成)，但是没有任何内容被覆盖。我使用引导程序，所以如果导入sass模块，如
// in main.js
import './app_overrides.scss'
import 'bootstrap/scss/bootstrap.scss'
其中./app_overrides.scss包含：
$def_color: #aaaaaa;
和bootstrap/scss/bootstrap.scss (代表前)：
$def_color: #ffffff !defaul
浏览 2提问于2018-08-14得票数 1
回答已采纳
2回答
我只能在Sass里筑巢
css、ruby-on-rails、sass
我不知道我缺少了什么，但我只能在我的rails文件中使用嵌套。我也希望能够使用、mixins、和变量。
我的创业板文件是包含sass的：
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
end
我的css文件名为custom.css.scss。我遗漏了什么？
浏览 4提问于2012-10-13得票数 0
回答已采纳
1回答
我应该用Sass或Scss编码吗？
syntax、sass、precompile
比起Scss语法，我更喜欢Sass语法，但我注意到后者更受欢迎，我害怕在Sass中工作，以后的版本不再支持它。很抱歉，如果这是一个重复的问题，我找不到任何答案在搜索栏。
浏览 1提问于2013-11-01得票数 3
1回答
为什么我不能和Webpack一起编故事呢？
webpack、vue.js、webpack-dev-server、webpack-style-loader、sass-loader
我的Webpack配置中有以下模块：
module: {
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'eslint',
include: projectRoot,
exclude: /nod
浏览 1提问于2016-05-04得票数 29
回答已采纳
7回答
如何结合腾讯云开发微信小程序？
api、serverless、html5
目前，微信小程序越来越流行，而且功能越来越强大，在性能方面也越做越好。因为能够原生调用小程序提供的组件和 API ，小程序的开发快捷，使用方便，越来越多的产品会落地到微信小程序上。但传统的微信小程序开发，和普通的H5页面开发或者原生APP开发相比，只是改变了前端部分的开发方式，还是离不开厚重的后台开发。 现在的小程序，在后台服务方面，正在往 serverless 趋势方向发力。小程序提供了云厂商的无服务器函数 SCF，使得小程序无需搭建一个后台服务即可运行。如何结合腾讯云开发微信小程序？
浏览 3741提问于2018-09-28
1回答
为什么我的全局风格模块会被多次导入？
css、sass、gatsby、sass-loader
我试图在我的Gatsby应用程序中设置一些全局Scss，但看起来在这样做之后，我在dev工具中看到了一些奇怪的行为：
您可以看到，我的全局样式正在多次出现并被覆盖。
这是一个Gatsby应用程序，所以我使用的是sass-loader和默认的dart-sass。
下面是我如何配置我的gatsby-config.js文件，以允许我基于这篇堆栈溢出帖子使用这些全局样式：
module.exports = {
plugins: [
...
{
resolve: `gatsby-plugin-sass`,
options: {
ad
浏览 6提问于2021-04-13得票数 1
1回答
如何在VueJS组件中使用引导带混合器
vue.js、bootstrap-4、vue-component
我用的是vue-cli + bootstrap-vue。尽管我像这样导入了引导程序(在我的main.js中)，但我还是搞不清楚为什么和如何引导混合器不能工作。
import 'bootstrap/scss/bootstrap-grid.scss'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue);
并试图在组件中使用一些混合器。
<style lang="scss" scoped>
.xxx {
@include me
浏览 0提问于2018-09-11得票数 3
回答已采纳
2回答
不是如何，而是最有效的方法，目标元素在Sass？
html、css、sass
在我的想法，我渴望它不要失控，我有一个简单的问题/例子，我想知道什么是最有效的方式，目标按钮在下面的例子？
就我个人而言，我喜欢选项2，但我做得对吗？
但我的问题如下表所示，
我不喜欢通过html向所有东西添加类/id。
使用Sass在父级中嵌套/目标子元素的能力过于具体
选项1:在html中提供按钮类名，使css中的目标更加容易。
<div id = "box">
<!-- Give button class/id -->
<button class = "button1"></button>
浏览 3提问于2015-01-18得票数 0
回答已采纳
2回答
引导、SCSS和PHP
php、ruby、twitter-bootstrap、sass
最近，我发现了Bootstrap，我无法解释我有多兴奋。问题是，要覆盖引导，需要使用SCSS来提高效率(也有较少的版本，但这不是我的重点)
因此，阅读SCSS，似乎需要使用Ruby和Compass。问题是我是一个程序员，在我完全掌握了这门语言之前，我不能分散我的精力。因此，我的问题如下：
引导、SCSS和PHP能一起有效地使用吗？我知道，当我工作时，我总是在用PHP编写代码时不断地修改我的CSS。
如果不是，首先使用Ruby和SCSS编写前端代码，然后将我的SCSS文件编译成CSS并切换到PHP，这是一个可行的选择吗？我不知道，但这对我来说似乎很费时。
如果你是一个PHP程序员
浏览 3提问于2014-04-17得票数 1
回答已采纳
1回答
Vue.js正确的vue路由器样式
webpack、sass、vue.js
我是vue/webpack的新手，我找不到在使用vue路由的项目中使用scss文件的适当方法。
项目结构如下：
/src
/routes
route1.vue
route1.js
route2.vue
route2.js
...
/scss
main.scss
mixins.scss
route1.scss
route2.scss
...
main.js
index.html
route1.vue (和route2，除了脚本src之外)的代码是：
<template>
<div i
浏览 2提问于2017-07-12得票数 0
1回答
在材料设计组件的上下文中，“使用这种SASS混合器”意味着什么？
sass、scss-mixins、gwt-material-design
我正在使用库。我有一个，我想更改它的underline-color。
说明书上说
若要自定义选项卡指示符，请使用以下混合器。
然后它给了一张桌子。对于下划线颜色，上面写着
下划线颜色($color)自定义下划线的颜色。
因此，我在我的scss文件中尝试如下：
.mdc-tab-indicator {
underline-color(red);
}
我编译我的sass (使用dart-sass)并得到以下错误
Error: expected "{".
上面写着这是"Sass Mixin“所以，我看看。在语法mixin-name($var
浏览 6提问于2020-02-26得票数 4
回答已采纳
1回答
覆盖Spree Commerce的Bootstrap变量
ruby-on-rails、twitter-bootstrap、spree
在将自定义的_variables.scss部署到生产服务器作为编译资产时，我遇到了问题。
在我的开发环境中，一切都很好，在生产过程中，我的变量被覆盖了。
我使用的是Rails 4.2.1和Spree 3.0稳定分支。
我的结构如下：
用vendor/assets/stylesheets/frontend创建的文件
_variables.scss (我的自定义应用程序变量)
all.css (由狂欢产生)
frontend_bootstrap.css.scss (覆盖狂欢)
navbar.scss (我的定制)
_variables.scss包含以下内容：
// Plac
浏览 5提问于2015-06-09得票数 4
回答已采纳
3回答
Vue CLI CSS预处理器选项: dart-sass VS node？
vue.js、webpack、sass、vue-cli、node-sass
在使用CLI (v3.7.0)创建新项目时，可以在dart-sass编译器和node-sass编译器之间进行选择。
它们之间如何比较，比在中声明的更具体
Sass表演小贴士
注意，在使用Dart Sass时，由于异步回调的开销，在默认情况下同步编译的速度是异步编译的两倍。为了避免这种开销，您可以使用光纤包从同步代码路径调用异步进口商。要启用此功能，只需将光纤安装为项目依赖项：
npm install -D fibers
还请注意，因为它是一个本机模块，在操作系统和构建环境上可能存在不同的兼容性问题。在这种情况下，请运行npm uninstall -D fibers来解决问题。
? Pi
浏览 1提问于2019-05-15得票数 182
回答已采纳
1回答
如何在scss混频器中使用多个选择器或嵌套选择器
css、sass
我想要这样的css代码
.img-wrapper {
width: 100px;
height: 100px;
overflow: hidden;
}
.img-wrapper image {
width: 100px;
}
我想在scss中像这样使用混音
@mixin fixed-img($width, $height) {
width: $width;
height: $height;
overflow: hidden;
...
}
.img-wrapper {
@include fixed-img(100px ,
浏览 4提问于2015-07-29得票数 0
回答已采纳
3回答
Rails/Webpacker在生产中不加载Vue样式
ruby-on-rails、vue.js、webpack
我有一个rails应用程序，我已经升级到使用WebPacker4.x，在开发过程中一切都很好，但是在生产中没有呈现单个文件组件样式，js工作得很好，甚至一些来自组件(vue-slider-component的样式也会正确显示)。我以前使用过webpacker 3，一切都很好，但是这个应用程序开始变得非常缓慢，并决定迁移到一个新的webpacker。
重要的一点是，我在vue组件中使用了sass (scss)样式。
这是我的配置：
// config/webpack/environment.js
const { environment } = require('@rails/webpac
浏览 1提问于2019-08-02得票数 7
4回答
如何在不同的文件夹中包含从一个sass文件到另一个sass文件的@mixin
css、sass、ionic3
我将从一个SASS文件中的一个混合文件包含到另一个文件中，但是使用离子型serve命令有一个错误：
Error: "Sass Error
Invalid CSS after " @include": expected identifier, was '"../../../theme/mai'"
这是我要导入混合文件的文件：
action-sheet-layout-1 {
@include '../../../theme/main.scss'
@include "settingAnimationH
浏览 0提问于2018-03-20得票数 22
2回答
在使用引导程序时，我应该如何管理sass代码？
ruby-on-rails、ruby、twitter-bootstrap
说：
在app/assets/样式表/application.scss.assets中导入引导样式：
//“引导-链轮”必须在“引导”和“引导/变量”@导入“引导-链轮”之前导入；@导入“引导”；
引导-引导前必须导入链轮，图标字体才能工作。
确保该文件具有.scss扩展名(或用于Sass语法的.sass )。如果您刚刚生成了一个新的Rails应用程序，那么它可能会附带一个.css文件。如果该文件存在，它将被服务，而不是Sass，因此将其重命名：
$ mv app/assets/样式表/application.css app/assets/样式表/application.css.assets
浏览 2提问于2015-03-02得票数 0
回答已采纳
1回答
Vue 3 (CLI)导入全局样式的次数超过需要
css、vue.js、import、sass、vue-cli
所以，我有具有全局样式的scss文件。这个文件看起来是这样的：
@import "colors";
@import "border-radius";
@import "box-shadow";
@import "paddings";
@import "margins";
@import "fonts-famalies";
@import "font-sizes";
@import "transition-durations";
@import "global-
浏览 2提问于2022-04-04得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
