SCSS in Sharepoint Framework Library Project

Looking for the proper way of constructing my projects. I decided to use 1 project per web part however is have a number of classes and react components that are common to all projects. So I created a library project and moved my common classes there. I used npm link to link both projects and all seems to be working well. My question is around SCSS files. Again I have a few that are common across all webparts. I know I can use the cdn to serve these files but i was wondering if i could use my current library project. If so, how do i “export” the SCSS as i do my ts and tsx files in the index.js? Any help is greatly appreciated

First project using SCSS

I recently completed my first website using SCSS and thoroughly enjoyed using it over plain old CSS even though I didn’t get use any of the advanced features of SCSS. I figured before I delve into making my next website I should get my code reviewed so I will be able to adapt these changes into my next project.

What I would like to know is what features have I been using properly? What features have I overlooked or misused? How is my overall folder structure and what performance optimisations could I make?

I would like to apologise in advance for the length of the following code block but I felt it would be best if I included all off it.

Thanks in advance

Folder structure can be seen here

<!-- language: lang-css --> /*setting body properties*/ body {     height: 100%; } html {     height: 100%; }  /* declaring variables*/  $  primaryBg: white; $  secondaryBg: #ededed;  $  navColour: #3D2D56; $  textColour: #1d1a21; $  secondaryTextColour: #fd5454; $  linkColour: #E08200; $  closed: red; $  open: green;  /* declaring breakpoints for media queries*/ $  mobile: 460px; $  tablet: 768px;  $  scrolltrack-colour: gainsboro; $  scrollthumb-colour: #a0a0a0; @mixin shadow($  property) {   -webkit-box-shadow: $  property; }  /* sets the width*/ ::-webkit-scrollbar {   width: 1vw; }  /*hides the scroll bar when the browser isn't being used*/ ::-webkit-scrollbar:window-inactive {   display: none; }  /*styling the "body" of the scroll bar*/ ::-webkit-scrollbar-track {   background-color: $  scrolltrack-colour;    @include shadow(inset 0 0 7px rgba(0, 0, 0, 1));   &:active {     @include shadow(inset 0 0 10px rgba(0, 0, 0, 1));   } }  /*styling the scrollbar thumb*/ ::-webkit-scrollbar-thumb {   border-radius: 10px;   @include shadow(inset 0 0 10px rgba(0, 0, 0, 1));   background-color: $  scrollthumb-colour;   &:active {     @include shadow(inset 0 0 17px rgba(0, 0, 0, 1));   } }  /*this media query keeps the scroll bar width proportioned correctly on smaller screens*/ @media only screen and (max-width: 700px) {   ::-webkit-scrollbar {     width: 2vw;   } }  /*styling for primary sections*/ .primary {     background-color: $  primaryBg; }   /*styling for secondary sections*/ .secondary {     background-color: $  secondaryBg; }   /*padding classes for adjusting layout*/ .pad-5-top {     padding-top: 5vh; } .pad-5-bottom {     padding-bottom: 5vh; } .pad-2_5-bottom {     padding-bottom: 2.5vh; } .pad-10-top {     padding-top: 10vh; } .pad-10-bottom {     padding-bottom: 10vh; }  h1 {     font-family: 'Architects Daughter', cursive;      color: $  primaryBg;     font-size: 4rem; }   h2, h3, h4 {     font-family: 'Architects Daughter', cursive;  }   p {     font-family: 'Robot', sans-serif;   }  .menu {     font-weight: bold;     margin-bottom: -0.3em; }   b {     color: $  secondaryTextColour;  }  a {     color: $  linkColour;     font-weight: bold;     &:hover{         color: $  textColour;      } }  .closed {     color: $  closed; }  .open {     color: $  open; }  /*styling for hero image*/ .hero-image {   height: 100vh;   overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative;  }  /*fallback for browsers w/o webp support*/ .no-webp .hero-image {   background-image: url(''); }  .webp .hero-image{   background-image: url(''); }  .hero-text{    text-align: center;   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%); }    .hero-text i {   color: $  primaryBg;   font-size: 2rem;  }  .hero-icons {      display: flex;     justify-content: center;  }  .hero-icons a {   padding-left: 7.5vw;   padding-right: 7.5vw; } .hero-icons i {   color: $  linkColour;   font-size: 4rem;   &:hover{     color: $  textColour;   }  }  #map {     height: 60vh;     width: auto; }  /*The followiing rules apply the "mirror" effect*/ .mirror {   z-index: 1;   position: relative;   font-size: inherit;   font-family: inherit;   padding: 0.5em 1em;   outline: none;   border: none;   background-color: $  navColour;   color: $  linkColour;   overflow: hidden; }   .mirror::after {   content: '';   z-index: -1;   background-color: hsla(0, 0%, 100%, 0.2);   position: absolute;   top: -100%;   bottom: -285%;   transform: translateX(-525%) rotate(35deg);   width: 4.6em; }  .mirror:hover {   cursor: pointer; }  .mirror:hover::after {   transition: transform 0.45s ease-in-out;   transform: translateX(200%) rotate(35deg); }  /*styling for the navigation bar*/ .navbar-custom {     background-color: $  navColour;     padding-bottom: 0;     padding-top: 0;     background-position: center;     background-repeat: no-repeat;     background-attachment: fixed;     background-size: cover; }  /*styling the navigation links */ .navbar-custom {     .navbar-nav {         .nav-link {             color: $  linkColour;             font-weight: bold;             padding-top: 2vh;             padding-bottom: 2vh;             font-size: 1.1rem         }       } }  /*styling for sticky navbar*/ #ghost-nav {      display: none !important; }   .inline{     visibility:none;     display:inline; }   .navbar-scroll {     z-index: 1;     position: fixed;     top: 0;     width: 100%; }  .parallax {     height: 100vh;     /* Create the parallax scrolling effect */     background-attachment: fixed;     background-position: center;     background-repeat: no-repeat;     background-size: cover; } .no-webp .burger {     height: 100vh;     background-image: url(""); } .webp .burger {     height: 100vh;     background-image: url(""); } .outside {     height: 100vh;     background-image: url(""); }  /*Media query for perfecting layout on desktops*/ @media screen and (min-width: $  tablet) {     /*This effect is display breaking on mobile*/     @import 'components/_mirrorEffect.scss';     .mobile {         display: none;     } }   /*Media query for perfecting layout on mobile screens*/ @media screen and (max-width: $  mobile) {     .desktop {         display: none;     } } h1 {     font-size: 3rem;     padding-bottom: 10vh; }      /*altering padding on icons in hero image*/ .hero-icons a {     padding-left: 2vw;     padding-right: 2vw; } .mobile-padding-top {     padding-top: 5vh; }         /*Media query for perfecting layout on tablet screens*/ @media screen and (min-width: $  mobile) and (max-width: $  tablet) {     .mobile {         display: none;     }     /*altering padding on icons in hero image*/     .hero-icons a {         padding-left: 3.5vw;         padding-right: 3.5vw;     }     iframe {         width: 240px;     }     .mobile-padding-top {         padding-top: 0;     } }  

Problem with changing in the scss file

I am facing problems that I can’t change the scss file which is there when you create a SPFx webpart in React.

When I try to change color of the webpart nothing happens. I am building an RSS Feed in SPFx.

I will add a part of the code snippet in the tsx file.


import styles from '../RssApp.module.scss';     let newsElement = (element: IRssItem)=> { //Newly added         return (               <div className = {styles.row} >                   <div className={styles.myTitle} style={{fontSize: '30px'}}>{element.title}</div>                   <div className={ styles.description }>{element.description}</div>                    <div>{}</div>               </div>         );     };      return (       <div className = {styles.column}>            <DefaultButton             data-automation-id="test"             text="Settings"             onClick={this._showPanel}           />            {}           {settingsPanel}       </div>       ); 

the scss file:

RssApp.module.scss(As you see I have commented out the original code and added a new class (myTitle) to see if it works):

// @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';     .rssApp {      .myTitle{         background-color: blue;       } //   .container { //     max-width: 800px; //     margin: 0px auto; //     box-shadow: 0 2px 4px 0 rgba(90, 21, 21, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); //   }  //   .row{ //     background-color: blue; //   }  //   .row { //     background-color: black; //   }  //   .column { //     @include ms-Grid-col; //     @include ms-lg10; //     @include ms-xl8; //     @include ms-xlPush2; //     @include ms-lgPush1;  //   }  //   .title { //     @include ms-font-l; //     @include ms-fontColor-white; //     background-color: $  ms-color-themePrimary; //   }  //   .subTitle { //     @include ms-font-l; //     @include ms-fontColor-white; //   }  //   .description { //     @include ms-font-l; //     @include ms-fontColor-white; //   }  //   .button { //     // Our button //     text-decoration: none; //     height: 32px;  //     // Primary Button //     min-width: 80px; //     background-color: $  ms-color-themePrimary; //     border-color: $  ms-color-themePrimary; //     color: $  ms-color-white;  //     // Basic Button //     outline: transparent; //     position: relative; //     font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; //     -webkit-font-smoothing: antialiased; //     font-size: $  ms-font-size-m; //     font-weight: $  ms-font-weight-regular; //     border-width: 0; //     text-align: center; //     cursor: pointer; //     display: inline-block; //     padding: 0 16px;  //     .label { //       font-weight: $  ms-font-weight-semibold; //       font-size: $  ms-font-size-m; //       height: 32px; //       line-height: 32px; //       margin: 0 4px; //       vertical-align: top; //       display: inline-block; //     } //   }   } 

As you see, I have added a new class called myTitle and added to the styles RssApp.module.scss.ts:

/* tslint:disable */ require("./RssApp.module.css"); const styles = {   rssApp: 'rssApp_9a4695d5',   container: 'container_9a4695d5',   row: 'row_9a4695d5',   column: 'column_9a4695d5',   'ms-Grid': 'ms-Grid_9a4695d5',   myTitle: 'myTitle_9a4695d5',   //title: 'title_9a4695d5',   subTitle: 'subTitle_9a4695d5',   description: 'description_9a4695d5',   button: 'button_9a4695d5',   label: 'label_9a4695d5', };  export default styles; /* tslint:enable */ 

But still no change to my RSS Feed: enter image description here

Would appreciate if someone could help me. Thanks

How to create common scss file in SPFx solution?

I have created SPFx solution which contains multiple webparts (Four webparts in 1 solution). All the webparts design are similar but with different logic.

Right now, I have created a duplicate file in all webparts, but I do not want to create duplicate css in different webparts, I want to make common scss file for the entire solution and use in entire solution (all webparts). How can I create common scss file and use in my all webparts in the solution.

sintaxe correta para usar variável como parâmetro – Vue e SCSS

Eu tenho uma função no SCSS que retorna uma cor com base em uma paleta/mapa de cores, como nessa imagem.

O nome da cor será passado como props por um componente pai, então eu preciso inserir o valor do prop como um parâmetro na função color.

O que eu tenho e funciona bem:

<template>   <div>     <style>     :root {       --customColor: {{color}};     }     </style>     <p>       <slot />     </p>   </div> </template>  <script> export default {   data () {     return {       color: 'red'     }   } } </script>  <style lang="scss" scoped> $  var: var(--customColor);  p {   color: $  var; } </style>  

mas quando tento usar a paleta de cores, color: color (primary) não funciona, exemplo:

<template>   <div>     <style>     :root {       --customColor: {{color}};     }     </style>     <p>       <slot />     </p>   </div> </template>  <script> export default {   data () {     return {       color: 'primary'     }   } } </script>  <style lang="scss" scoped> $  var: var(--customColor);  p {   color: color($  var); } </style>  

Eu recebo o erro undefined ^ Function color finished without @return

OBS: Quando eu uso manualmente color: color (primary); funciona perfeitamente.

Alguém tem alguma ideia de como eu posso fazer isso?

desde já, obrigado

Подключение несколько scss файлов к стартовому шаблону vue cli

У меня есть несколько scss файлов, с миксинами и прочими настройками для проекта. Мне нужно подключить их к стартовому шаблону vue cli. Как это можно сделать? Мне необходимо, что бы эти миксины и стартовые настройки вроде font-face распространялись на все веб приложение. Для сборки использую webpack.

Собственно мой проект

UI Framework — Best Practices — SCSS Separate from Javascript or Bundled Together

Hi everyone I’m a UX designer for business software and we are using Angular. We currently have an SCSS framework and then we made a component library.

edit I don’t know what happened to the rest of my question. Sorry about that.

We have an NPM package that has the components with the necessary javascript/typescript. The SCSS is separate.

We’re still trying to determine if keeping those separate is a better approach than bundling the javascript/typescript together.

What approaches have all of you taken to have a clean easily maintainable UI library?

Carregar scss a partir de arquivo js

Estou trabalhando em um site estático, onde tenho a seguinte estrutura de diretórios:

/   /src     exemplo.scss     exemplo.js   index.html   webpack.config.js 

No meu exemplo.js eu dou um require('exemplo.scss'), que por sua vez carrega o bootstrap. O webpack gera um arquivo index.js, neste arquivo consigo ver todas as classes do bootstrap (que foram carregadas a partir do exemplo.scss), mas as classes do bootstrap não são aplicadas no index.html.

Obs: webpack, webpack-cli, bootstrap, css-loader, scss-loader e etc. instalados. Não é gerado nenhum erro no console ou log. Estou importando o arquivo index.js gerado pelo webpack na minha index.html. É possível ver todas as classes do bootstrap no arquivo index.js gerado pelo webpack, mas não é possível usar as classes no index.html.

How to setup SCSS with Hugo

I’m pretty new with Hugo and am struggling a bit with the documentation as it feels pretty fragmented with incomplete examples.

I’ve created a new site hugo new site site-name along with a new theme hugo new theme theme-name.

In the documentation page for SASS/SCSS there’s the following example:

{{ $  sass := resources.Get "sass/main.scss" }} {{ $  style := $  sass | resources.ToCSS }} 

Not sure where that’s supposed to go, how the whole pipeline works. Also, this seems to be specifically looking for files under an assets folder even though the theme is created with a static/css folder. Most examples I find on the web are all old setups using gulp to compile before the support being added to hugo (from my understanding)