I'm trying to follow some YT tutorial about Bootstrap 5 with the use of some tools like Sass.
Author of this video in his example at the beginning is testing if his script for compiling Sass code is working.
Here's the screenshot of his work:
screenshot 1
I tried to do the same thing and I got an error saying:
Error: Sass variables aren't allowed in plain CSS.
Here's my code:
$primary: #ff0000;
.test-1 {
color: $primary;
}
And the screenshot: screenshot 2
This showed up after compiling my script:
/* Error: Sass variables aren't allowed in plain CSS.
* ,
* 1 | $primary: #ff0000;
* | ^^^^^^^^
* '
* scss/style.css 1:1 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
"Droid Sans Mono", monospace, monospace;
white-space: pre;
display: block;
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
content: "Error: Sass variables aren't allowed in plain CSS.\a \2577 \a 1 \2502 $primary: #ff0000;\a \2502 ^^^^^^^^\a \2575 \a scss/style.css 1:1 root stylesheet";
}
Screenshot of terminal
I think that my code looks the same as his, so where is the problem? Had some rules of Sass had changed since the video was posted?
Here is my info from package.json:
"sass": "^1.45.2"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.4",
"autoprefixer": "^10.4.1",
"bootstrap": "^5.1.3",
"postcss": "^8.4.5",
"postcss-cli": "^9.1.0"
And his:
"sass": "^1.32.12"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
"autoprefixer": "^10.2.5",
"bootstrap": "^5.0.0",
"postcss-cli": "^8.3.1"
What is your file extension? It should be .scss. => my-style.scss
Related
I am trying to deploy my first gatsby site, with a blog but it keeps failing. Ive updated all my dependancies but now I cant figure out what exactly is the issue.
I would really appreciate any advice, its been bugging me for days. Before this, I got a bunch of npm errors so I updated all the dependancies which I thought would do the trick.
FYI Im using contentful cms for the blog
It looks like the build failed here:
12:33:55 PM: error A page component must export a React component for it to be valid. Please make sure this file exports a React component:
12:33:55 PM: /opt/build/repo/src/pages/BlogElements.js
12:33:55 PM: not finished createPagesStatefully - 0.064s
12:33:55 PM: npm ERR! code ELIFECYCLE
12:33:55 PM: npm ERR! errno 1
12:33:55 PM: npm ERR! gatsby-starter-hello-world#0.1.0 build: `gatsby build`
12:33:55 PM: npm ERR! Exit status 1
12:33:55 PM: npm ERR!
12:33:55 PM: npm ERR! Failed at the gatsby-starter-hello-world#0.1.0 build script.
12:33:55 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
12:33:55 PM: npm ERR! A complete log of this run can be found in:
12:33:55 PM: npm ERR! /opt/buildhome/.npm/_logs/2021-01-02T12_33_55_072Z-debug.log
The BlogElements.js file is just a styled component:
import styled from 'styled-components';
export const Styledh2 = styled.h2`
color: purple;
`;
export const StyledBox = styled.li`
width: 500px;
background-color: lightblue;
float: left
`
export const StyledLink = styled.div`
background-color: yellow;
position: relative;
left: 3rem;
justify-content: space-around
`
Your issue comes because BlogElements is stored under /pages folder so Gatsby is trying to create URL paths based on that folder structure. Since you are not returning a valid React component, your code is breaking.
If you are using BlogElements only for styling purpose, move it to another location (for example, under /src/components/styles) and import it wherever you need.
A valid styled-component under /pages should look like this:
import React from "react"
import styled from "styled-components"
const Container = styled.div`
margin: 3rem auto;
max-width: 600px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
`
const UserWrapper = styled.div`
display: flex;
align-items: center;
margin: 0 auto 12px auto;
&:last-child {
margin-bottom: 0;
}
`
const Avatar = styled.img`
flex: 0 0 96px;
width: 96px;
height: 96px;
margin: 0;
`
const Description = styled.div`
flex: 1;
margin-left: 18px;
padding: 12px;
`
const Username = styled.h2`
margin: 0 0 12px 0;
padding: 0;
`
const Excerpt = styled.p`
margin: 0;
`
const User = props => (
<UserWrapper>
<Avatar src={props.avatar} alt="" />
<Description>
<Username>{props.username}</Username>
<Excerpt>{props.excerpt}</Excerpt>
</Description>
</UserWrapper>
)
export default function UsersList() {
return (
<Container>
<h1>About Styled Components</h1>
<p>Styled Components is cool</p>
<User
username="Jane Doe"
avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
/>
<User
username="Bob Smith"
avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
excerpt="I'm Bob smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
/>
</Container>
)
}
Note that the sample snippet above is exporting a UsersList as a React component unlike your BlogElements.
Try to build your project locally before pushing it to Netlify to avoid that errors.
I have this simple_form:
.reveal.doubt id="doubt-material-#{material.id}" data-reveal=true
button.close-button data-close=true aria-label="Close reveal" type="button"
span aria-hidden="false" ×
h5 #{t 'students.materials.index.questions.button'}
p #{t 'students.materials.index.questions.form_explanation'}
= simple_form_for [:student, trail, component, material, material_student, doubt], html: {id: "doubt" }, remote: true do |f|
= f.input :recipient, collection: [['contato#witseed.com','Atendimento a cliente'],['tec#witseed.com','Suporte técnico']],value_method: :first, label_method: :second, label: "#{t 'students.materials.index.questions.form_send_email'}", include_blank: "#{t 'students.materials.index.questions.form_blank_line'}", required: true, input_html: {class: 'custom_select'}
= f.input :question, as: :text, label: true, label: "#{t 'students.materials.index.questions.form_message'}" , input_html: { rows: "2" }
= f.submit "#{t 'students.materials.index.questions.form_send_button'}", class: 'button primary-button-active'
It generates the html below:
Which generates the form below:
Now I want to style the dropdown but I am failing with finding in the code the select element. At inspect it is very clear to me where it is.
I have tried to add:
.input
position: relative
select
background-color: white
&#doubt_recipient
border: 2px solid red
padding: 5px
But failed.
Does anyone have any suggestion ? Thank you very much.
It was actually a matter of just running the line below in terminal:
bundle exec rake assets:precompile
And CSS style rendered.
Finally I have just added style at the id:
#doubt_recipient
border: 2px solid red
padding: 5px
background-color: white
i'm setting up a list by getting items from the OData service and when i want to display them using the ObjectListItem i found no way to increase the size of image and i've tried to use css like that but i didn't work
.sapMImg {
font-size: 400px ; /*!important;*/
}
<ObjectListItem
type="Navigation"
press=".onSelectionChange"
icon="/H31{MimeType}"
title="{MatlDesc}"
number="{PriceUnit}"
numberUnit="{BaseUom}"
numberState="{= 11 > 10 ? 'Success' : 'Error' }"
class="sapMImg"
/>
Add this to a css file you are already using:
.sapUiIcon {
font-size: 1.5rem !important;
}
To use an external css file, you can load them using this config on the manifest:
"resources": {
"css": [
{
"uri": "content/css/style.css"
},
mj-font does not work in mjml.
Here is what I am trying to do in index.mjml:
<mjml>
<mj-head>
<mj-font name="testFont" href="testFont.ttf"/>
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-text font-family="testFont" align="center" font-size="20px">
Just a text
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Here is the screenshot of the project directory:
Here is what I see in the app:
And here is what the font should look like:
What am I missing here and how could I make my font work?
Thank you.
I have found it difficult to use custom fonts using the mj-font tag. If you use a google font api it seems to work correctly.
Example using Google font
<mj-font name="Raleway" href="https://fonts.googleapis.com/css?family=Raleway" />
Taking that into consideration, I have started to using the following and has worked for me: (it goes between <mj-style></mj-style> tags)
#font-face {
font-family: testFont;
src: url(https://cdn2.hubspot.net/hubfs/199900/fonts/someFontFile.ttf)
format('truetype');
}
I would normally use a .woff file instead of a .ttf file.
Diving deeper into it, if you go to a Google font link such as https://fonts.googleapis.com/css?family=Raleway in your web browser, the contents of the file is this:
/* latin-ext */
#font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v13/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v13/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Back to your problem... Since the file that you are loading with the <mj-font> tag is a binary file, I would imagine that mjml doesn't know how to process it. If the file were a .woff font file then it might work. Perhaps they could change this in the near future. After all, it is a very useful tool.
I'm trying to translate some CSS to ScalaCSS and I can't quite figure out how to encode a pattern of "class subclass". Here is a specific example:
.navbar-top-links {
margin-right: 0;
}
.navbar-top-links li {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
In the quickstart you can see the use of & to define child styles:
".navbar-top-links" - (
marginRight(0),
&("li") - (
display.inlineBlock,
&.lastChild -
marginRight(15 px)
)
)