Problem Background:
I have a tauri app set up in Linux (Pop OS), with sveltekit with vite as the frontend framework, and typescript and SCSS being the languages I code for scripts and styles.
Vite is also hot reloadable.
There's an app.scss for overall styles and components scoped scss defined in each components using the <style lang="scss"> tag
Problem Description:
When I run the pnpm tauri dev command, the built executable will be executed for development debugging.
While the scss file app.scss and some component scss is being loaded, other components scss seems to be not working. (See image below)
Since it is using vite as a dev server, I used a browser to visite the website and see if it is a tauri issu, and the webpage in browser seems to be having different components that doesn't load SCSS as expected. (See imaghe below, the palce holder image should have paddings around it but it doesnt)
When I try to update the SCSS for the components then undo the changes, after hot reload, the scss would work again, so there shouldnt be a mistake in my scss syntax or such.
There's also no error when building the application.
Related
I'm trying to use SCSS to style my elements in vue-native project. I just created a fresh project and ran it with Expo and it ran just fine. Then in my App.vue I tried to change <style> to <style scoped lang='scss'> and my app crashed.
I didn't find anything about SCSS in vue-native documentation. So I tried to follow the vue.js docs, I installed sass-loader with npm install -D sass-loader sass, installed fibers... and my app couldn't compile.
So does vue-native support working with SCSS at all? And if it does - how? What did I do wrong?
Vue native is just a wrapper for React Native. React Native doesn't support CSS or SCSS as it has its own StyleSheet system as you are writing native code and styling.
In response to your comment, vue native compiles css-like styles to react native styling, so you can still use vue-native instead of directly writing JS!
We're using the Angular flavor of Material 2 (https://material.angular.io/) for a main project, but would like to create a separate static (HTML/CSS) prototyping workspace that is able to access just the Material 2 CSS styles from that main project. The idea is that this separate directory will pull the compiled CSS from the Angular project, but allow for experimentation in HTML/CSS styling without configuring any JS.
Is it possible to compile the full CSS (components, typography, etc.) from the Angular Material 2 project, without needing AngularJS? It seems like there are styles being inserted by JS using the <style> tag.
Here's a basic demo of the SCSS file I've tried to build to load the Material styles:
#import "~#angular/material/theming";
#include mat-core();
This works for adding things like typography and the class names, but it doesn't add all of the possible styles for those classes. For example, the card component only gets very basic styles—it's missing the other styles such as padding that seem to be injected via JS.
I also tried the material-components-web project, which has compiled CSS here. It comes very close to doing the job. But unfortunately just renaming .mdc- to .mat- is not enough. The component names and usage aren't quite the same.
For example, material-components-web uses BEM: mdc-card__actions.
Whereas the Angular versions calls it .mat-card-actions.
Like many developers I am using SASS as a preprocessor. I want to edit my stylesheets in Chrome. I've setup Source Maps to do this, and I know Chrome now supports SASS.
I have a SASS file, style.scss, used to create style.css used on the page. It's mainly just imports of other SASS files. Eg:
#import "colors";
Clicking an imported SASS file, like _colors.scss, it shows a green 'active' icon and shows it is linked to a source map.
However when I edit a SASS variable - like the $dark-blue in the screenshot below, where I've made it a red instead - the file doesn't change, nor does the page update.
How do I edit an imported SASS file in Chrome DevTools?
Edit: note the 'Linked to' on the imported file doesn't seem correct. The only way _colors.scss is used is part of style.scss which is turned into style.css. I suspect this is the cause of the problem. I've opened https://github.com/gulp-sourcemaps/gulp-sourcemaps/issues/349 to see if this is the case.
I'm currently working on a project and Im attempting to load my scss/sass through webpack. I'm currently loading it in successfully using the following libs:
node-sass
sass-loader
css loader
style-loader
I am able to require/import the styles in successfully but the problem occurs that when I load up the application the page loads without the styles for about 1.5 seconds and then after the page "blinks" and the styles finally load in.
Is there a way to get around this through webpack? I have heard of ExtractTextPlugin and a few others but I've tried to implement it by looking at article examples and github examples but they don't seem to work by using require/import where they are needed. I'd like to only require the styles based on my react component needs. Not loading any styles that the components don't need.
You have (at least) two options to prevent this FOUC (Flash of unstyled content):
Use a plugin like mini-css-extract-plugin or extract-text-webpack-plugin to extract the compiled CSS into a separate file that you can load normally in your <head> (read more) or
Hide your content, using CSS, until styles are ready, the loaded styles should contain the styles that will make the content visible.
Does SASS render to an actual css file of my choosing or a newly generated style sheet?
in the case of an app with many style sheets , the most sensible thing is replace some css at a time and render to a style sheet that loads last -that would override all other style sheets until the updating is done and I would remove css.
The typical Sass workflow is to compile to a main style.css file from a style.scss file where you specify which files it should compile. You can set it to compile to a different file. If you're using the command line you can tell it what to watch and where to output a la
sass --watch input.scss:output.css
sass --watch app/sass:public/stylesheets
http://sass-lang.com/documentation/file.SASS_REFERENCE.html
Most GUIs that handle Sass have simple settings that allow you to do the same for individual files.
It renders into an actual CSS file. All of the SASS is eventually compiled into vanilla CSS