The angular generator has a dependency on compass and thus ruby when using SASS.
Two questions:
Is it possible/practical to remove the ruby dependency by using something like node-sass?
If so, how do I accomplish #1 and still use angular generator to generate controllers, routes, services, etc in the future?
If you are using the Yeoman Angular generator and you wish to use SASS/SCSS without depending on Ruby, you could use the grunt-sass Grunt module.
Yeoman is essentially a project set-up with Grunt so you can just add whichever Grunt modules you need. If you are unfamiliar with Grunt, you can read the documentation here.
Essentially, you can set up the Grunt configuration for your SASS task, then register the task in your generated project's Gruntfile.js:
grunt.initConfig({
sass: {
options: {
sourceMap: true
},
dist: {
files: {
'main.css': 'main.scss'
}
}
}
});
grunt.registerTask('default', ['sass']);
You should note that this Grunt module uses Node SASS for CSS compilation instead of Compass, so you may be missing out on some Compass mixins you may be used to.
Related
I have a brand new project using SvelteKit. By default, vitePreprocess is used to handle scss and other files, as described in the docs:
vite-plugin-svelte offers a vitePreprocess feature which utilizes Vite
for preprocessing. It is capable of handling the language flavors Vite
handles: TypeScript, PostCSS, SCSS, Less, Stylus, and SugarSS. For
convenience, it is re-exported from the #sveltejs/kit/vite package. If
you set your project up with TypeScript it will be included by
default:
// svelte.config.js
import { vitePreprocess } from '#sveltejs/kit/vite';
export default {
preprocess: [vitePreprocess()]
};
However, if I use lang="scss" in my files:
<style lang="scss">
....
</style>
I get the following error:
Error: Error while preprocessing /Users/francesco.leardini/Documents/pet projects/budget-tracker/src/routes/+page.svelte - Preprocessor dependency "sass" not found. Did you install it?
at loadPreprocessor (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:36922:19)
at scss (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:36962:20)
at compileCSS (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:36482:40)
at async preprocessCSS (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:36644:12)
at async style (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/#sveltejs/vite-plugin-svelte/dist/index.js:2055:20)
at async process_single_tag (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/svelte/compiler.mjs:46844:27)
at async Promise.all (index 0)
at async replace_in_code (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/svelte/compiler.mjs:46732:26)
at async process_tag (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/svelte/compiler.mjs:46858:29)
at async preprocess (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/svelte/compiler.mjs:46898:30)
Shouldn't scss files be handled out of the box as stated in the docs?
Add the dependency sass to your project first?
npm add -D sass or with whatever package manager you use.
i would like to add tailwindcss to a new rails 5.2.5 project. since i like tailwind but know about the heavy weight, i also would like to have a purge css module.
i followed the instructions of several set up guides, as well as the official documentation. also i tried to install tailwind via gems (https://github.com/rails/tailwindcss-rails, https://github.com/IcaliaLabs/tailwindcss-rails) but since all the solutions out there are based on rails 6 nothing works. also i have no idea what webpack actually does, so i would rather dont use it but instead use tailwind via the asset pipeline, but also with class purging.
i am a bit lost during the build process. is there a convenient guide on how to set up tailwind at rails 5 instead of rails 6? i really enjoy the automagical approach of most gems but cant find a convenient solution.
thank you!
It is possible to add tailwind to the Asset Pipeline without using Webpacker, and without tailwindcss-rails either.
If you use the new Tailwind CLI you can build tailwind classes, connect them to the asset pipeline and purge unused classes on the fly.
The general instructions for using the Tailwind CLI are in the installation section which is currently in their docs you will need node installed to have access to the npx command.
Once you understand the general approach use the following steps:
Update the generated tailwind.config.js to turn on Just In Time compiling and to configure class purging in rails
module.exports = {
mode: 'jit',
purge: [
'./app/**/*.html.erb',
'./app/helpers/**/*.rb',
'./app/assets/javascripts/**/*.js'
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Make sure that you add all the path's where you will declare Tailwind classes otherwise purge may remove classes that you are using (read Writing purgeable HTML tailwind docs for more details)
During development run the watcher process so that your CSS is being continually built based on the HTML you write
npx tailwindcss --no-autoprefixer -o ./vendor/assets/stylesheets/tailwind.css -w
Note that I am placing the generated tailwind styles into vendor/assets but you can place them anywhere the asset pipeline looks for css.
Also, I still use autoprefixer-rails gem so that I can apply the correct prefixes across both tailwind and my project css. In this case you need to set --no-autoprefixer in the tailwind watch command so you are not running it twice.
Then import the tailwind styles into your app/assets/stylesheets/application.scss with #import 'tailwind'
Provided the file is in your assets path the styles will be imported.
Make sure you have a deployment option to re-compile your tailwind.css file as the JIT compilation may is not guaranteed (this is suggested by Tailwind). This will depend on how you deploy but I run the following during deploy:
NODE_ENV=production npx tailwindcss --no-autoprefixer -o ./vendor/assets/stylesheets/tailwind.css
That should be it.
I run this approach with Rails 6.1 but it doesn't use anything special and I expect it should run with Rails 5 projects.
Finally, you may be interested in using the Tailwind #apply feature to set some default styling with Tailwind classes. This is also possible with this setup. To do it you need to have an extra file for the base classes which is used during the Tailwind compilation. The important thing here is not to add this file into your application.scss as the Asset Pipeline will not understand #apply.
I add the few styles that I do to a app/assets/stylesheets/tailwind/base.css file.
I then amend the compilation watcher to npx tailwindcss --no-autoprefixer -i ./app/assets/stylesheets/tailwind/base.css -o ./vendor/assets/stylesheets/tailwind.css -w which will gather all the base styles set and compile them into the tailwind output file.
Good luck with it.
I have a Gatsby site with sass support using the gatsby-plugin-sass plugin. That works, but now I want to add PostCSS support.
According to the warning on this page (a deprecated plugin) this now should be possible by defining the postcss plugin in the postCssPlugins options.
Indeed, the sass plugin documentation tells me I can add a postcss plugin to the options, but it's unclear to me how to do this exactly. I already added the gatsby-plugin-postcss plugin separately and am now trying to integrate it with the sass plugin.
This does not work:
gatsby-config.js:
// SASS support with PostCSS support:
`gatsby-plugin-postcss`,
{
resolve: `gatsby-plugin-sass`,
options: {
postCssPlugins: ['gatsby-plugin-postcss'],
},
},
I guess I should call it in a different way but I can't find any documentation on this?
gatsby-plugin-postcss use specific postcss plugin(postcss-preset-env, for example) to handle css code, itself is not a postcss plugin, so you can't use it in postCssPlugins option.
And the pipeline for gastby to handle sass file is sass -> postcss plugin -> final result, so just use sass plugin and choose postcss in its option postCssPlugins.
{
resolve: `gatsby-plugin-sass`,
options: {
postCssPlugins: [
require(`postcss-preset-env`)({
stage: 2,
features: {
"nesting-rules": true,
},
}),
],
precision: 6,
},
},
So I made a library that I can bower install using a direct link. I can use this library from another internal application by adding the library name in the dependency of the bower.json file. When other internal application does a bower update, the changes I made on the library will be applied to their application. This part is working very well.
Now, I'd like the other software devs to have freedom to change the styles. They can create css file directly and that will work. However, it's a hackish route. I can provide them the same settings file that I use.
So i tried putting that file in the main section of the bower.json but wiredep is processing it. I put it in exclude and the error is gone when I run gulp.
"main": [
"dist/stylesheet.css",
"src/_settings.scss"
],
this is the code that prevented it from being parsed by wiredep
wiredep: {
directory: 'bower_components',
exclude: ['css/foundation.css','src/_settings.scss']
}
Am I right that I'll have to create a new gulp task and put 'src/_settings.scss' as gulp.src like this
gulp.task('sasstask2', function () {
return gulp.src('src/_settings.scss')
.pipe($.sass())
.pipe(gulp.dest('src/css'));
});
I also like the generate css to be injected to index.html but not sure how to do it? Will wiredep automatically inject it to index.html?
I'm using grunt-contrib-compass to compile my SCSS files, and here's the Gruntfile configuration for the same.
compass: {
dist: {
options: {
watch: true,
imagesDir: 'web/assets/img',
sassDir: 'web/assets/scss',
cssDir: 'web/assets/css'
}
}
}
As you can see that I'm using Compass' "watch" option to watch for files for change. So all files within scss folder are compiled and eventually, one main file styles.css is generated within css folder. While I can use outputStyle: "compressed" option for Compass task to generate all CSS files minified, I want those files to remain expanded.
So is there anyway I can generate original files as expanded while an additional file .min.css which is compressed?
An alternative solution I have as of now is to avoid using watch of compass, and rely on grunt-contrib-watch and grunt-contrib-cssmin instead. But grunt-contrib-watch is much slower compared to that of Compass.
I cannot have another watch task running to monitor CSS files and run cssmin when they're changed, since starting compass with watch: true will block any other following tasks (unless I use something like Grunt-concurrent, which I want to avoid).
Any help is appreciated.