Are the at-rules #use and #forward supported with the current version of node-sass (6.0.1)?
I tried it in a project and it compiles but the at-rules are basically just copied to the CSS output and not resolved.
main.scss:
#use 'buttons';
main.css:
#use 'buttons';
What the main.css should look like?
.button {
padding: 1rem;
border: none;
border-radius: 50rem;
font-weight: bold;
font-size: .875rem;
text-transform: uppercase;
}
No, those are only supported in dart-sass, not node-sass/libsass
Related
The deep selector in vue3 has been changed into :deep(xxx), but it doesn't work when I use it in .less imported externally to .tsx.
BTW, Although Vue3 is no longer use /deep/ or >>>, I still tried and didn't work too
.register_form {
&__base_info {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: palegoldenrod;
&__input_container {
padding: 1rem;
border: 1px solid green;
border-radius: 5px;
&__label {
font-weight: bolder;
}
:deep(input) {
border: none;
background-color: yellow;
}
}
}
}
I have the following file:
styles.css
#import url("https://fonts.googleapis.com/css2?family=Oxygen:wght#300;400;700&display=swap");
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: flex-start;
overflow-x: hidden;
padding: 0;
margin: 0;
-webkit-text-size-adjust: none;
font: normal normal normal 16px Oxygen;
letter-spacing: 0px;
color: #1b1018;
background-repeat: no-repeat;
background-size: cover;
}
body > header {
flex-shrink: 0;
color: #fff;
background: #69b684;
text-align: center;
padding: 20px;
}
body > main {
margin: 0 auto;
max-width: 1150px;
text-align: center;
padding: 50px 10px;
max-width: 860px;
background: #ffffff 0% 0% no-repeat padding-box;
border: 9px solid #ffffff53;
}
which I want to minify with: CleanCSS.
For that, I did the following:
$ npm install clean-css-cli -g
$ cleancss --output styles.min.css styles.css
But when executing the command, I get the following warning:
WARNING: Skipping remote #import of "https://fonts.googleapis.com/css2?family=Oxygen:wght#300;400;700&display=swap" as resource is not allowed.
Is there any way to get rid that warning?
The output file is fine for me, though:
styles.min.css
#import url(https://fonts.googleapis.com/css2?family=Oxygen:wght#300;400;700&display=swap);body,html{height:100%}body{display:flex;flex-direction:column;min-height:100vh;justify-content:flex-start;overflow-x:hidden;padding:0;margin:0;-webkit-text-size-adjust:none;font:normal normal normal 16px Oxygen;letter-spacing:0;color:#1b1018;background-repeat:no-repeat;background-size:cover}body>header{flex-shrink:0;color:#fff;background:#69b684;text-align:center;padding:20px}body>main{margin:0 auto;max-width:1150px;text-align:center;padding:50px 10px;max-width:860px;background:#fff 0 0 no-repeat padding-box;border:9px solid #ffffff53}
Thanks in advance!
I made a Vue module for myself and published to NPM, but when I try to install this module to another project via npm i <module-name>, I can use component, but it's not applying CSS for my component.
I think the problem is I am writing all CSS in style scope in my component. I don't know what the best practice is for including CSS. My style is so simple like this:
<style>
.container {
border: 1px solid #E5E5E5;
position: relative;
}
.image-container {
height: 70%;
width: 100%;
text-align: center;
margin-top: 7%;
}
.title-container {
width: 100%;
text-align: center; /* optional */
overflow: hidden;
text-overflow: ellipsis;
background-color: #F5F5F5;
border-top: 1px solid #E5E5E5;
position: absolute;
bottom: 0;
}
</style>
For a library, it might be more convenient (and less error-prone) for your users if you include the CSS in your bundle, so users wouldn't have to import the CSS themselves. This is also recommended in the Vue CLI docs. To do this, set css.extract=true in vue.config.js:
vue.config.js:
module.exports = {
//...
css: {
extract: true
}
}
I have to make some changes on the ui. Now I try to replace the built-in sensenet logo, but I am stucked. I tried to change /Root/Global/images/sensenetlogo.png but there is no option to replace it.
The logo is defined in a css file (/Root/Skins/sensenet/styles/skin.css)
Search for this part:
.sn-layout-inter-index .sn-slogen {
position: absolute;
left: 5px;
top: 13px;
font-size: 16px;
color: #fff;
font-weight: normal;
background: url(/Root/Global/images/sensenetlogo.png) no-repeat;
padding-left: 150px;
padding-top: 10px;
padding-bottom: 10px;
}
and change the background-image url. This will will replace the logo on the homepage.
Replacing the logo on other subpages change the logo url the same way at
.sn-layout-intra .sn-layout-head .sn-logo, .sn-layout-inter .sn-layout-head .sn-logo, .sn-layout1 .sn-layout-head .sn-logo {
...
}
If you installed sensenet from source make sure that you changed the .css file both in the file system and through sensenet's admin surface (Content Explorer).
I am trying to disable my anchor tags from being underlined when hovered over. I have added text decoration: none; to my .scss file like so:
$font-family-serif: 'Nixie One';
$font-family-base: $font-family-serif;
#import "bootstrap";
//#import "bootstrap-sprockets";
//TB Navbar overrides to change the color scheme
$bgDefault : #ffffff;
$bgHighlight : #ffffff;
$colDefault : #8587f1;
$colHighlight : #4e5aff;
.navbar-default {
font-weight: bold;
font-size: 25px;
background-color: $bgDefault;
border-color: $bgHighlight;
text-decoration: none;
Also when I look at the web page, it seems to compute the rule correctly:
Where am I going wrong here?
.navbar-default {
font-weight: bold;
font-size: 25px;
background-color: $bgDefault;
border-color: $bgHighlight;
text-decoration: none;
a
{
text-decoration: none;
&:hover{
text-decoration: none;
}
}
So apparently the issue was that I just had to specify the the a tag: a {text-decoration: none;} within my scss file instead of just setting it for the class.