Sass

Getting Undefined variable error when compiling SCSS using node-sass

由 不羁岁月 提交于 2020-07-08 07:02:50
问题 package.json "scripts": { "compile:sass": "node-sass sass/main.scss css/style.css -w" } main.scss @import "abstracts/variables"; @import "base/typography"; _variables.scss $color-light-grey: #777; $color-white: #fff; _typography.scss body { color: $color-light-grey; } .heading-primary { color: $color-white; } Now my issue is when I'm trying to compile with npm run compile:sass it throws the following error: "message": "Undefined variable: \"$color-light-grey\"." 回答1: Looks like there are two

Powershell build - compiling SASS

由 折月煮酒 提交于 2020-07-08 04:06:08
问题 I'm hoping to start using SASS in a Visual Studio 2010 project using Web Workbench - but the issue of version control through TFS has me stumped. To avoid overriding someone else's changes I understand that the outputted CSS should be excluded from source control, and that the SCSS should be compiled to CSS server side during the build process. Currently we use a Powershell script for the build, but I can't seem to find any information on how to incorporate SCSS compilation in Powershell. Is

Sass Loader Error: Invalid options object that does not match the API schema

由 耗尽温柔 提交于 2020-07-06 05:32:14
问题 I'm using VueJS with the framework VuetifyJS (v2.0.19). I'm getting this error after running npm run serve : Sass Loader has been initialised using an options object that does not match the API schema. What I tried: I've deleted the node_modules folder and reinstalled/updated all npm packages and node.js to the latest stable version. Full error message: error in ./node_modules/vuetify/src/components/VRangeSlider/VRangeSlider.sass Module build failed (from ./node_modules/sass-loader/dist/cjs

CSS filter:invert not working with background-color

由 一笑奈何 提交于 2020-07-03 09:07:08
问题 I have the following CSS applied to the <html> tag: filter: invert(1); All elements get inverted even background-color of elements, (Chrome v80) Once I try the same on Safari iOS 13 / Safari MacOS, every element get inverted except for <html>'s background-color CSS filter property is supported for all browsers I'm running: https://caniuse.com/#feat=mdn-css_properties_filter. Could someone explain this behavior? html { filter: invert(1); /* this background-color does not change on ios+other

CSS text ending indentation

由 耗尽温柔 提交于 2020-07-03 03:23:09
问题 I'm trying to achieve the red highlighted effect with CSS. The first row to be the longest, the second shorter and so on. https://codepen.io/make96/pen/QmMJyx I'm using Jade and SASS and below is my code: #section min-height: auto width: 100vw background: black .content margin: 0 auto padding: 7vh 0 width: 52vw //border: 1px solid white position: relative h1,h2 color: #c9d0d4 font-family: 'Helvetica Neue', sans-serif font-size: 1.2em font-weight: 100 letter-spacing: 1px padding: 0 margin

SassMeister online interpreter: Invalid CSS, expected “{”, was “”

由 雨燕双飞 提交于 2020-06-28 05:12:43
问题 When I copy and paste this sass into the online sass converter I get an error which is weird because the original project worked. Can you spot the error? I can't. It usually works right out of the box. This is the working project on codepen.io: https://codepen.io/LandonSchropp/pen/xLtif html, body, h1 height: 100% width: 100% body transition: background-color 0.3s ease-in font-family: 'Open Sans', sans-serif background-color: hsl(350, 100%, 50%) // in firefox, a transformed element causes a

SassMeister online interpreter: Invalid CSS, expected “{”, was “”

由 别来无恙 提交于 2020-06-28 05:12:00
问题 When I copy and paste this sass into the online sass converter I get an error which is weird because the original project worked. Can you spot the error? I can't. It usually works right out of the box. This is the working project on codepen.io: https://codepen.io/LandonSchropp/pen/xLtif html, body, h1 height: 100% width: 100% body transition: background-color 0.3s ease-in font-family: 'Open Sans', sans-serif background-color: hsl(350, 100%, 50%) // in firefox, a transformed element causes a

Cannot Export Sass Variables into Javascript

由 好久不见. 提交于 2020-06-27 09:11:15
问题 I'm trying to export the following SASS variables into Javascript within my Vue project. _export.sass :export colorvariable: blue othercolorvariable: red I'm following the response in this post as a template. However when I try to import my sass file below... About.vue <script> import styles from "@/styles/_export.sass"; export default { name: "About", data() { return { styles }; } }; </script> I receive the following error: WAIT Compiling... 2:17:03 AM 98% after emitting CopyPlugin ERROR

Sass ID selector isn't working in React and create-react-library

由 假如想象 提交于 2020-06-27 03:46:16
问题 I have a library I'm making with a Header component and a Button component. I gave them ID's to identify them in my SASS file, this is my current situation: index.js : import React from 'react' import './styles.module.scss' export const Button = ({text, bgColor, textColor, fontFamily}) => { return <button id="button" style={ {backgroundColor: [bgColor], color: [textColor], fontFamily: [fontFamily]} }>{text}</button> } export const Header = ({text, size, fontFamily, textColor}) => { return <h1

scss rendering error [Internal Error: File to read not found or unreadable:]

由 安稳与你 提交于 2020-06-26 12:41:08
问题 I want to make a website with scss but when i save the scss file it gives me an error. However, if I saved it a couple times then it will render completely. Its nothing major but it bugs me. I tried finding an answer in Google but nothing works This is just a simple scss file because I am just trying to check if there's an error before i begin my project. turns out there is. @import "fixed"; * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #444; } { "status": 3,
订阅 Sass