I just added sass via meteor add fourseven:scss and am trying to use
body {
#extend .purple;
#extend .lighten-3;
}
from the materializecss package, but im not seeing any results. I've changed the file extension to .scss. Any ideas why its not working?
you have to set the path in scss.json on your root folder. If the json file isn't there, create it. Here is an example of one. Correct paths according to your env
{
"enableAutoprefixer": true,
"includePaths": [
"path/to/some/sass/folder",
"path/to/another/sass/folder",
"/home/nan/.meteor/packages/materialize_materialize/0.96.1/web.browser/packages/materialize_materialize/bin/materialize.css"
]
}
Related
I have an application that was build using the Angular CLI, Angular version 11. I have some directives in my application that require specific css classes. Rather than have separate scss files for each directive I would like to add the scss classes to the styles.css contained in the application root. However I can't do this as the styles.css file is css and not scss. Is there a way I can convert this file to scss?
I just manually changed the file extension and changed the reference in the angular.json file in the { "architect": { "build : { "styles": } } }property - so far I have experienced no unexpected behavior or errors
I'm using Tailwind in a Gatsby.js project. My environment is VSCode, using Prettier code formatter.
How do I get rid of these linting error alerts?
Solution for both .css and .scss
At the root level of your project, update or create a dir .vscode with a file settings.json:
Add the following to .vscode/settings.json:
{
"css.validate": false,
"less.validate": false,
"scss.validate": false
}
Install the vscode-stylelint extension
install stylelint-config-standard:
npm i stylelint-config-standard -D
create a stylelint.config.js file at the root level and add:
module.exports = {
extends: ['stylelint-config-recommended'],
rules: {
"at-rule-no-unknown": [
true,
{
ignoreAtRules: [
"tailwind",
"apply",
"variants",
"responsive",
"screen",
],
},
],
"declaration-block-trailing-semicolon": null,
"no-descending-specificity": null,
},
};
restart vsCode
Results:
You get rid of these SASS linting errors when using Tailwind-CSS and keep doing css validation with stylelint.
You can tell VS Code's CSS linter to ignore "Unknown At Rules" (like #tailwind). This will leave the rest of your CSS validation intact:
VS Code -> Command Palette -> Workspace Settings -> Search for: CSS Unknown At Rules
Set to ignore
VS Code can also whitelist specific CSS properties with CSS > Lint: Valid Properties, but it doesn't look like whitelisting specific 'at rules' is supported yet.
Quick Solution for both .css and .scss (NOT RECOMMENDED)
At the root level of your project, update or create a dir .vscode with a file settings.json:
Add the following to .vscode/settings.json:
{
"css.validate": false
}
Results:
You get rid of these SASS linting errors when using Tailwind-CSS but you disable CSS validation.
The other answers are thermonuclear. Even Confucius stopped with a canon...
This is the one that did it for me.
To reproduce: Settings -> search for "invalid tailwind directive", update the value for this rule to "ignore". Voila.
Add this one-line fix in VSCode's settings.json
"scss.lint.unknownAtRules": "ignore"
This way you don't have to disable CSS validation.
If you using VS Code then you can add support for modern and experimental CSS within Visual Studio Code by installing the following plugin to fix the error while using Tailwind CSS directives.
https://marketplace.visualstudio.com/items?itemName=csstools.postcss
I have an GastbyJS application, and I'm trying to add typescript on it. I solve most of the issues, but I'm not able to make the css module work with it.
I have this import in my file, that works fine:
import styles from "./card.module.css"
But when I added the typescript config it says that Cannot find module './card.module.css'.ts(2307)
I tried to use some gatsby plugins, but they didn`t work as expected.
The whole code is here: github
I had the same problem and after trying all the various plugins I came across this solution which worked for me.
Create a css.d.ts file with:
declare module '*.css' {
const content: { [className: string]: string };
export default content;
}
Add these lines to your tsconfig.json file:
"esModuleInterop": true,
"files": ["./src/typings/css.d.ts"]
The "files" path needs to match where your type definition file is.
https://github.com/thetrevorharmon/gatsby-starter-typescript-sass/issues/1#issuecomment-436748732
I have created the angular project in VS Code using the following command.
ng new my-app --style=scss
by following this github link
Now every style sheet that is being created using angular-cli is with extension of .scss instead of .css
Now there is a requirement to check that how Sass is being converted to css because I am new to Sass. I am facing some issues in designing thus it would be nice for me to look at css file.
I have searched in those folder where scss file exists but there I couldn't find css file. Please help
Update
Look at this picture, when I created the component using cli, it created .scss instead of css so I need to look for css file.
I've been able to find a way to view my compiled .scss files as a .css file.
Before I only saw the raw .scss files when inspecting from Chrome.
The trick was setting some flags in the angular.json file so it will tell webpack (what angular-cli uses to build the app) that I want the .scss files served as .css along with a sourcemap of the file:
./angular.json
{
...
"projects": {
"my-prject": { <-- or whatever your project is named
"architect": {
"configurations": {
"production": { // <-- production is default, you might be working w/ custom configurations [development, test, w/e]
...
"sourceMap": true, <-- will serve source maps w/ the file so you can view it in the browser easily
"extractCss": true, <-- actually serve the .css files and not the .scss files
...
}
}
}
}
}
}
Once that is updated, restart the dev server or rebuild your application
then you can go into chrome dev tools and look at find the styles.css file (or whatever you have the file name set to) and view it:
If you are working on local then:
local {
"sourceMap": true,
...
}
Sass in Angular 2 are always converted into Css in run time when you compile and build the project. However if you are using any other environment like Gulp tasks and watches, you can run 'sass --watch input.scss output.css'
As folks have already mentioned, the css is built at runtime. You can still set the result using inspect in chrome or firefox.
It's definitely a requirement to check the generated CSS when you find something wrong and Chrome Inspector can't help! So this is definitely a good question, which is why I'm here.
To summarize, #y_vyshnevska is right that "you may find your css inlined in script tags at the end of head", and he also gave an in-depth link: https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975 on the topic. I put it here in case you neglect it.
It looks not possible to view compiled css files at a runtime.
However, you can do the following trick: angular applies components' styles using <style> attribute. Find the one you need in elements inspector (you can search there using ctrl (or cmd) + f.
After you've found the stylesheet you need, you'll see it's truncated. To see the entire content, click on the style element and select "Store as global variable". After that in console run
copy(Object.values(temp1.sheet.cssRules).map(r => r.cssText).join('\n'))
This will copy all css to your buffer
I am using Laravel 5.1 with Elixir: Laravel Elixir Documentation
If you use Compass to compile Sass code, the resulting CSS file has comments above each selector that gives the line number of the code in the .scss file, as shown below:
When using the standard Elixir gulpfile.js to compile a Sass file (app.scss), a sourcemap is generated in the public/css folder, however I am unable to get the line numbers in the comments as shown in the screenshot.
Is this possible when using Gulp?
Finally, I did.
1- Create an elixir.json file within your project root(according to laravel elixir).
2- Insert the below config:
{
"css": {
"sass": {
"pluginOptions": {
"sourceComments": true
}
}
}
}
The Laravel Elixir uses node-sass plugin which has an option(sourcecomments) for adding line number and file name to the your compiled css file.
I hope this can help you.