使用@use设置SASS模块“库”的正确方法是什么，以允许用户覆盖库变量？
使用@use设置SASS模块“库”的正确方法是通过以下步骤来实现，以允许用户覆盖库变量：
- 确保你的SASS版本是4.0以上，因为@use是在SASS 4.0中引入的新特性。
- 在你的项目中创建一个名为"_library.scss"的文件，用于存放库的变量和混合器。
- 在"_library.scss"文件中定义你的库变量。例如，你可以定义一个主题颜色变量：
- 在"_library.scss"文件中定义你的库变量。例如，你可以定义一个主题颜色变量：
- 在需要使用库的地方，使用@use导入库文件，并设置as关键字来指定一个别名。例如，你可以将库文件导入并命名为"library"：
- 在需要使用库的地方，使用@use导入库文件，并设置as关键字来指定一个别名。例如，你可以将库文件导入并命名为"library"：
- 现在你可以使用库中定义的变量了。例如，你可以在样式中使用库中定义的主题颜色变量：
- 现在你可以使用库中定义的变量了。例如，你可以在样式中使用库中定义的主题颜色变量：
- 注意，这里的"library"是你在第4步中设置的别名。
- 如果你希望用户能够覆盖库中的变量，你可以在库文件中使用!default标记。例如，你可以将主题颜色变量定义为：
- 如果你希望用户能够覆盖库中的变量，你可以在库文件中使用!default标记。例如，你可以将主题颜色变量定义为：
- 这样，用户可以在导入库文件之前重新定义这个变量，从而覆盖库中的默认值。
总结起来，使用@use设置SASS模块“库”的正确方法是：
- 创建一个库文件，定义库的变量和混合器。
- 使用@use导入库文件，并设置别名。
- 在样式中使用库中定义的变量和混合器。
- 如果需要允许用户覆盖库变量，使用!default标记定义变量。
腾讯云相关产品和产品介绍链接地址： 腾讯云的云计算产品包括云服务器、云数据库、云存储等，具体可以参考腾讯云官方文档：https://cloud.tencent.com/product
请注意，以上答案仅供参考，具体的实现方法和推荐产品可能因个人需求和具体情况而有所不同。
相关·内容
2回答
如何在物质化中改变色彩主题
css、node.js、materialize
我创建了nodejs项目。这里是package.json
{
"name": "materializecssdemo",
"version": "1.0.0",
"description": "Use of material design components",
"main": "index.js",
"scripts": {
"prestart": "node-sass ./scss/theme.
浏览 9提问于2017-12-26得票数 4
回答已采纳
3回答
是否有可能创建本地/私有的sass混合器？
css、sass
我有三个sass文件: a.scss，b.scss，c.scss
a.scss：
@mixin font($size, $color){
font-size: #{$size};
color: #{$color}
}
p{
@include font(10px, blue)
}
b.scss：
@mixin font()
{
..
}
c.scss
@import a.scss
@import b.scss
我认为b.scss中的混合字体()覆盖了a.scss中的混合字体($size，$color)。
p{
@include font(10px, blue) //
浏览 7提问于2013-12-09得票数 13
回答已采纳
1回答
为不同的主题编写SASS
css、sass
我有一个有两个主题的网站，让我们称之为"A“和"B”。两个主题的CSS之间大约有98%的CSS重叠，所以我将所有的内容都转换为使用SASS，这样我就可以为两个主题之间需要不同的数据引入变量。例如，下面是我的"main.scss“的一个片段
@import '_colors.scss';
body {
font-family: $font-name;
background-color: $secondary-color;
}
H1, H2, H3, H4, H5, H6 {
color: $primary-color;
f
浏览 3提问于2019-10-29得票数 1
回答已采纳
2回答
如何覆盖角库scss变量？
javascript、angular、typescript、sass、styling
我在角12中创建了一个库，我实现了几个组件，我想标准化样式颜色，所以我也实现了scss变量，我创建了一个SCSS文件：
lib\dinotable.scss
$primary-color: green;
$secondary-color: red;
但我也希望库使用者能够覆盖其消费应用程序中的颜色，如何让它们覆盖dinotable.scss中的变量？
您可以在这里找到库：，使用"npm运行包-dt“构建和打包库，使用者应用程序在这里：。
浏览 2提问于2021-10-05得票数 0
回答已采纳
1回答
从javascript向Sass函数动态添加css变量颜色
css、angular、sass、css-variables、scss-mixins
我试图通过使用css变量的javascript添加动态颜色，然后尝试使用sass函数来处理该颜色，但由于sass是先预编译的，所以出现了错误。我可以在这里遵循的另一种方法是什么？我可以添加任何插件，或者为这部分代码用css编写代码。有谁能帮我一下吗？我正在为我面临的这个特定问题添加一个示例代码笔。提前感谢！
//code for SCSS file:
@import "compass/css3";
$color: var(--primary-color, #ffc53a);
$light: lighten(#{$color},50%);
$dark: darken($colo
浏览 1提问于2021-03-25得票数 0
3回答
具有角分量的SCSS / SASS中的全局变量
css、angular、variables、sass、themes
我们正在开发一个Range5中的云应用程序，它将部署在一个实例中，但将针对多个客户。这个问题涉及主题的管理，每个客户都希望有自己的主题(主要是颜色)。应用程序的架构(简化)如下所示：
--src
--app
app.component.html
app.component.scss
app.component.ts
-- component1
comp1.component.html
comp1.component.scss
comp1.component.ts
...
--scss
浏览 1提问于2018-05-28得票数 2
2回答
如何在vue中覆盖物质化的sass变量？
sass、materialize、vuejs2、vue.js
我想在物化中改变变量。
$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;
/*...*/
在我的Vue 2 main.js中，我包括了这样的物化样式
require('materialize-css/sass/materialize.scss
浏览 4提问于2017-02-25得票数 4
回答已采纳
1回答
使用if命令的Rails、Sass和MaterializeCSS变量
ruby-on-rails、if-statement、sass、materialize
我有一个简短的问题，为什么这在我的app/javascript/stylesheets/application.scss中起作用？
@import 'materialize-css/sass/components/_color-variables';
$primary-color: color('blue', 'lighten-2') !default;
$secondary-color: color('yellow', 'base') !default;
@import 'materialize-cs
浏览 7提问于2021-07-18得票数 3
1回答
我对SCSS或狼吞虎咽有意见。来自@include的SCSS未被编译为CSS。只有高度正在编译，但不包括背景颜色或放在@include中的任何内容。
下面我有一些文件结构和两个sass文件，一些帮助将是非常感谢的，谢谢！
// ==============================================
// File structure
/
|_ src
|_ utils
| |_ _mixins.scss
|
|_ views
| |_ _index.scss
|
|_ style.scss
// =============
浏览 2提问于2015-11-06得票数 0
回答已采纳
4回答
资料ui - createMuiTheme中的CSS变量
javascript、material-ui、css-variables
我正在尝试使用定义为css变量my-pallette.scss的现有颜色创建一个物质用户界面主题。
:root {
--primary-color: '#FF0000';
...
}
然后用这样的方法：
import { createMuiTheme } from '@material-ui/core/styles';
export const muiTheme = createMuiTheme({
palette: {
primary: {
main: 'var(--primary-color)',
}
浏览 3提问于2020-09-16得票数 8
1回答
VueJS & Vuetify如何在Sass中使用变量
vue.js、sass、vuetify.js
使用VueJS，我需要为每个用户显示不同的颜色。颜色取决于用户设置。
在我的vuetify.js中，我有：
export default new Vuetify({
theme: {
themes: {
light: {
primary: user.colorMain ? user.colorMain : '#F39200',
当我使用：
$vuetify.theme.themes.light.primary
在我的部件里。
但是，我也需要在我的variable.scss文件中覆盖Sass变量：
$primary-color: #f392
浏览 4提问于2022-04-12得票数 1
2回答
用CSS变量覆盖引导4 Sass变量？
html、css、angular、twitter-bootstrap、sass
我试图在引导4中使用角应用程序中的CSS变量将默认的主Sass变量改写为自定义颜色，如下所示：
styles.scss
:root {
--primary: #00695c;
}
$myPrimary: var(--primary);
$primary: $myPrimary; // This does not work
@import '../node_modules/bootstrap/scss/bootstrap';
在编译我的应用程序时，我会得到这个错误：
Failed to compile.
./src/styles.scss (./node_module
浏览 4提问于2020-03-02得票数 6
3回答
将sass文件打包成单个sass文件
css、angular、webpack、sass、gulp
TL;DR:我的问题是如何将一些sass文件打包成一个sass文件？。
我一直在开发一个角组件库，并将其打包成ng-packagr。我们叫它@my-lib/ngx-components吧。
我的库的使用者将导入像@my-lib/ngx-components/navbar这样的组件。
我决定在组件中添加主题支持。
例如，我有一个默认颜色(背景、文本、悬停等)的导航条组件。我希望我的库的使用者能够用他们自己的主题覆盖这些颜色。这就是为什么我编写了一个mixin，它接受$theme输入并覆盖一些css规则，如下所示(这是我所拥有的基本版本)
_navbar-theme.sass
@mixin nav
浏览 0提问于2018-03-20得票数 13
回答已采纳
1回答
sass文件，编译并使用gulp分离主题颜色文件
sass、gulp、gulp-sass
我有一个这样的文件夹结构：
|- assets
|- sass
global.scss
_mixin.scss
_body.scss
_header.scss
_footer.scss
|- themes
blue.scss
base.scss
dark.scss
我想编译我的sass文件，并从中得到这个css结构(最重要的是，我想为我的颜色单独的css文件)：
|- asse
浏览 2提问于2016-05-28得票数 2
2回答
使用Sass更改物化中的主题颜色(React)
reactjs、sass、materialize、theming
我似乎找不到很多关于在Materialize in Sass中覆盖颜色的教程。我能找到的唯一教程是关于下载Sass文件，然后通过编辑_variables.scss和重新编译将其直接集成到项目中，以获得新的CSS文件。
理想情况下，我希望使用NPM包，这样就不必手动更新Sass文件夹。因此，我的目标是使用NPM包"materialize-css“并以某种方式覆盖Sass中的颜色。
我已经设置了一个React测试项目。我的代码如下：
INDEX.JS
import React from 'react';
import ReactDOM from 'reac
浏览 5提问于2020-04-28得票数 1
4回答
无法在引导中覆盖$主题颜色
twitter-bootstrap、bootstrap-4、sass、bootstrap-5
它是用SASS引导4.0
我的style.scss文件包含以下代码：
@import "../bootstrap/scss/bootstrap";
@import "colors";
@import "main";
_colors.scss文件包含以下代码：
$bg-white : white;
$theme-colors: (
primary: #333333
)
您可以看到，我只是试图覆盖$theme-color('primary')，但问题是它什么也不做。
如果我在文件@import "color
浏览 6提问于2017-09-13得票数 26
回答已采纳
6回答
在VueJS组件中使用sass变量
laravel、sass、vue.js、laravel-elixir
对于需要使用变量的VueJS组件，我遇到了一个相当简单的问题。问题在于获取sass来注册组件中的变量。
我尝试导入包含变量的_variables.scss文件，但没有成功。在这一点上，任何指导都是非常感谢的，或者如果有另一种方式的组件继承样式。
MyComponent.vue
<template>
<div class="my-color"></div>
</template>
<style lang="sass">
.my-color {
color: $primary
浏览 10提问于2016-02-23得票数 33
回答已采纳
1回答
从CDN更改主题颜色
css、materialize
我在一个项目上使用物化，我必须使用链接来实现加载。因此，在我的项目标题中，我有：
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.c
浏览 5提问于2020-04-02得票数 0
5回答
如何在CSS中使用全局变量？
reactjs、webpack、css-modules
我正忙着学习CSS的反应，我不太明白如何存储变量？例如，在Sass中，您可以这样做：
// _variables.scss
$primary-color: #f1f1f1;
// heading.scss
@import './variables';
.heading {
color: $primary-color
}
如何在CSS模块中实现这一点？
浏览 10提问于2016-11-24得票数 27
回答已采纳
2回答
应该只适用于一个类的样式将应用于所有内容。
javascript、extjs、sass、extjs6
我的视野里有个边框。在边界布局中，我有一个“头”部分和“导航”部分。
文件夹结构如下所示：
我只想在标题部分添加样式。
我在"sass/src/view/main/header“文件夹中创建了一个"Header.scss”文件：
正如我所理解的，当您在文件夹中创建匹配的文件夹和文件结构时，该sass/var/view文件中的样式应该只适用于应用程序文件夹中的给定类。
我在Header.scss文件中添加了以下规则：
//in Header.scss
$panel-body-background-color: red;
主体背景颜色确实改变了标题，但它也改变了
浏览 1提问于2015-08-28得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
