I recently scaffolded a new webapp with Yeoman (1.4.5). In my Gruntfile.js I have set the following config:
...
// Compiles Sass to CSS and generates necessary files if requested
sass: {
options: {
lineNumbers:true,
sourceMap: true,
includePaths: ['bower_components']
}
...
Even though Grunt (grunt-cli v0.1.13) handles my instructions without errors and everything is running smoothly, unfortunately no SASS line numbers are showing up in my compiled CSS files?
Am I missing something or is this an issue with the grunt-sass node package? I would like to keep my automated task instructions centralized in my gruntfile.js. Any help would be greatly appreciated!
The right option is:
sourceComments: true
Looking at grunt-sass documentation, it looks like the option are only passed to node-sass directly. Add it doesn't looks like node-sass support these options - or not in the way you've written it.
I'd suggest reading the documentation to figure out the correct way to pass these arguments https://github.com/sass/node-sass#options
Related
This is my first time installing and running tailwind CSS. I follow the instructions and did everything accordingly but then it started showing some warnings like below
Can you tell me why I am getting these warnings and anyway for me to fix them? As I am worried that my generated CSS will be missing styles So help is needed to fix it
Also, can I keep the tailwind CSS in watch mode? Please give me the command line or video or explain to me the way to fix it? Thank you in advance!
This warning occurred because you did not use any of the tailwind classes, causing tailwind to suspect that the project config was not implemented correctly.
https://tailwindcss.com/docs/installation
Make sure you don't have repeated properties in your Tailwind config file. After upgrading from v2 to v3, Accidently I had put two content properties. Other than that make sure you have done migration properly.
framework guide: https://tailwindcss.com/docs/installation/framework-guides
upgrade guide: https://tailwindcss.com/docs/upgrade-guide
It's look like you dont have the tailwind config file. Take a look in your root folder if you have. If not you can create one by this command: npx tailwindcss init
Then the tailwind cli will create the tailwind.config.js file. It looks like:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
https://tailwindcss.com/docs/installation
I'm trying to style my FullCalendar according to technique 2 as described in this documentation. It says I should use PostCSS with postcss-custom-properties and postcss-calc.
My project uses Parcel for bundling and not WebPack like FullCalendar do in their examples, but from my understanding, using PostCSS in Parcel should just be plug-and-play by including a postcss.config.js file, so I figured it shouldn't be a huge issue. Here's what that file looks like:
module.exports = {
plugins: [
require('autoprefixer')({
"grid": true
}),
require('postcss-custom-properties')({
preserve: false,
importFrom: [
'src/style/fullcalendar-vars.css'
]
}),
require('postcss-postcss-calc')
]
};
So I have a file src/style/fullcalendar-vars.css. For the purpose of testing, it looks like this:
:root {
--fc-button-bg-color: red;
}
But nothing changes. When I look in the dev tools, there are no CSS variables set. Did I miss something?
I don't know if I can give you more information, I can't share a Stackblitz or anything else afaik, because the proplem lies in the building process. But I can link to the github repository where I am right now so you can look in other files and see what can be wrong https://github.com/WestCoastJitterbugsOrg/Personalized-Calendar/tree/c7633401cb1bb50488e11d0d306cb11333961f2d
Thank you!
I think the issue was that I used scss for everything else. A much simpler solution was to change the file extension of fullcalendar-vars.css to scss and import it in main.scss. No hassle, everything works like a charm! Finally I can have my pretty bright red buttons ;)
I am trying to import the .css from full-calendar package.
First, I created a new component my-calendar (html, scss, ts).
Then, I tried 3 different ways but only the last one worked for me:
Reference the file directly, as the documentation suggested, in the index.html (it does not work because the reference to node_modules is lost when you build the project)
<link href="node_modules/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">
Adding #import "~fullcalendar/dist/fullcalendar.min.css"; in my-calendar.scss. If I am not wrong, this should add the style into main.css when the project is being built (is not working)
Create custom copy config (copy.config.js)
module.exports = {
...
copyFullCalendar: {
src: ['{{ROOT}}/node_modules/fullcalendar/dist/fullcalendar.min.css'],
dest: '{{BUILD}}'
}
}
and adding #import "fullcalendar.min.css"; into my-calendar.scss
UPDATE:
and adding #import "fullcalendar"; into my-calendar.scss
to avoid compiler errors when use ionic build --aot --minifycss --minifyjs
I would appreciate if someone could clarify the best way and explain if I misunderstood some concept.
PS: Remember that I am working with Ionic3 and I am not using the Angular CLI.
third method of yours will be the best way to implement , but it can be done in another way more like ionic.
You need to make use of the includePaths when configuring the custom path , as we are dealing with custom css, add sass.config.js to local project folder where we configure custom includePaths like this
includePaths: [
....
'node_modules/ap-angular2-fullcalendar'
],
In package.json scripts to include custom css configuration file, like this:
"scripts": {
.....
"ionic:serve": "ionic-app-scripts serve -s ./config/sass.config.js"
},
Only problem with this implementation is when you update ionic-app-scripts you have to compare the native sass.config.js file to the local file and check if there is anything changed.
This is a troublesome method and an issue was raised in Github but unfortunately they closed the issue with the following justification
Configs are extended, so only include the fields that you're changing.
Everything else will inherit the defaults.
As of #ionic/app-scripts : 3.2.0, it seems you'll still need to
#include FILE; somewhere
See this closed issue on app script's github
I found that as of
'Ionic Framework : ionic-angular 3.9.2'
you have two choices insert your import in src/theme/variables.scss or src/app/app.scss.
For example in variables.scss
/* some declarations here */
#import 'insrctest';/*file sits in src/test/insrctest.scss*/
And in my custom.config.js
includePaths: [
'node_modules/ionic-angular/themes',
'node_modules/ionicons/dist/scss',
'node_modules/ionic-angular/fonts',
'./src/test', /* when the import above gets called, node-sass will look in here */
I'm new to using SASS and Sublime Text 2 for WordPress development, both are exactly what I need but I've run into a problem with compiling my SASS into CSS, which I'm trying to do using the SassBuilder package like it was in Hongkiat's guide.
The issue could be one of the following -
config-file using incorrect output-path (seems to be the case to me
personally).
config file location needs to be changed.
my coding SASS could possibly be wrong causing no changes to occur on the style.css file.
settings wrong with Sublime Text 2.
My files are SCSS and thus will not work with SassBuilder
The Underscores framework stores the style.css file in the root of the theme folder so
theme/style.css
this is while the sass files are found within a folder in the theme folder so
theme/sass/sassfiles.scss
In my .sassbuilder-config.json file (The file used by SassBuilder to compile into CSS) I currently have the following code, but I'm unsure whether my output_path is actually targeting the style.css file which is in the folder above the .sassbuilder-config file
{
"output_path": ".../style.css",
"options": {
"cache": true,
"debug": true,
"line-comments": true,
"line-numbers": true,
"style": "nested"
}
}
Is this targeting the correct file, if not what would the correct code to make it do so be? I've done some Googles but keep coming into pathing code for non related languages.
I could also consider moving the config file but the Hongkiat guide states it should be in the same folder as the SASS files, from what I've understood.
My code could possibly be wrong, but all I've done so far is just some basic variables to actually test the compiling and that not working when tested is why I'm here, I've copy pasted a font weight variable to all relevant files, individually, in various combinations and altogether even though the import should have sufficed - but even then it did not update the style.css in any case.
To get into detail regarding the code I'm trying to apply a font style to all headings, though one confusing thing is that there are two typography.scss files to be found with Underscores, though their contents sort of differ.
The SASS variable in theme/sass/variables-site/_typography.scss
$font-header-weight: 800;
Then in headings which if found in theme/sass/typography/_headings.scss
h1,h2,h3,h4,h5,h6 {
font-weight: $font-header-weight;
}
The other _typography.scss file draws variables from the one above so I presume that adding another variable was the thing to do.
As for Sublime Text 2, I'm new to Sublime Text but I've seen on tutorials and web articles etc that people are using code to watch but I'm unsure where/which program I do this with (is it command line?)
I have also followed the guide on the SASS site to get the code running so it shouldn't be that (using Ruby version 1.9.3-p551)
If the issue is SCSS files and not SASS, how do I compile it then? as I've looked that up too but am still as confused.
Hope I get some clarity on this soon, stuck at the first step and I just want to get on and start designing!
To summarize, I just want my SASS to start watching/compiling out to my CSS file.
I'm using a similar arrangement to you.
Try this:
Instead of Sass Builder (or in addition, i have both installed)
download and install the package "SASS Build" by Jaume Fontal.
Then, in Sublime Text 2, Preferences -> Browse Packages, go to the SASS Build package folder and edit the very short build file (SASS.sublime-build) as follows: (note you only have to add the /../ in the first line)
{
"cmd": ["sass", "--update", "$file:${file_path}/../${file_base_name}.css", "--stop-on-error", "--no-cache"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}
On my install, it now compiles scss to css in the parent folder.
Surely
"output_path": ".../style.css",
should just read
"output_path": "../style.css",
your output path is just incorrect I think.
I decided to go with ScoutApp as a solution, may not answer my immediate query but it makes things a lot more simple, straights forward and less fiddly.
Also I did change my out_path code to ../style.css but it didn't help.
Have you installed sass? If not use gem install sass in a terminal window, restart sublime text and try again.
I want to use semantic-ui within ember-cli project, having trouble with including fonts.
bower install semantic-ui
Import css and fonts in Brocfile.js
app.import('bower_components/semantic-ui/dist/semantic.css');
app.import('bower_components/semantic-ui/dist/semantic.js');
var semanticFonts =
pickFiles('bower_components/semantic-ui/dist/themes/default/assets/fonts', {
srcDir: '/',
files: ['**/*'],
destDir: 'assets/themes/default/assets/fonts'
});
This works, because semantic.css looks for themes/default/assets/fonts relative to itself.
Note the destDir: 'assets/themes/default/assets/fonts', this is because ember-cli puts the semantic-css within assets/ folder, and I have to put the fonts in that folder. But this looks like a hack is there a better solution?
Finally semantic-ui dist folder doesn't include different build options, do I have to compile the project myself eg: using gulp?, I thought using bower it should be straightforward.
We also got 404's for the fonts after installing Semantic via Bower. We solved it by adding the font folder as a tree to the Ember build.var
EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles = require('broccoli-static-compiler');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
babel: {
includePolyfill: true
},
fingerprint: {
extensions: ['js', 'css', /*'png', 'jpg', 'gif',*/ 'map']
}
});
app.import('bower_components/semantic/dist/semantic.css');
app.import('vendor/shims.js');
var semanticIcons = pickFiles('bower_components/semantic/dist/themes/default/assets/fonts', {
srcDir: '/',
destDir: '/assets/themes/default/assets/fonts'
});
return app.toTree([semanticIcons]);
};
Looking at semantic-ui, it seems pretty gigantic, and specifically setup with gulp.
First off, I would use the flag --save in your bower request.
bower install --save semantic-ui
This will add it as a dependency to your bower.json automatically - or --save-dev if it's only for development and not production.
Semantic-ui looks like it's written in "LESS", so not only do you have to deal with a favored build tool, but also it has opinions about the preprocessor.
The fonts involved seem to be just some google includes, and some svg fonts.
My advice, if you really really want to use a monstrous set of CSS declarations like this, - in this situation - would be to take the /dist output .css and .js -and- combine it with YOUR favorite css pre processing setup - and just override where appropriate. - or borrow the forms or whatever specific styles lead you to want to use this.
I am worried that fully integrating it into your ember project wont be as smooth as intended... and that you won't get a terribly useful amount of stuff out of keeping it in sync.
Just my opinion, - but I can't comment yet. - and I think you would be better off just writing the styles in stylus from scratch anyways. : )
I had the same problem.
I don't know if there's a better way, but I added the following line to the config/application.rb
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components', 'semantic-ui', 'dist')
This adds the dist folder to the asset path, so when semantic-ui is looking for /themes, it will be picked up.