symfonycasts / sass-bundle Goto Github PK
View Code? Open in Web Editor NEWDelightful Sass Support for Symfony + AssetMapper
Home Page: https://symfony.com/bundles/SassBundle/current/index.html
License: MIT License
Delightful Sass Support for Symfony + AssetMapper
Home Page: https://symfony.com/bundles/SassBundle/current/index.html
License: MIT License
As PhpCSFixer did with the "check" command (an alias to "fix --dry-run")...
... what do you thing about a "sass:watch" command ?
Suppose this setup:
/* assets/styles/app.scss */
import 'tools/base';
/* assets/styles/tools/base.scss */
.splash {
background-image: url('../../images/login-bg.png');
}
The image lives at assets/images/login-bg.png
, so the relative path above is, correctly, relative to the source file. Currently, if you compile this, because the contents are all compiled into, basically, assets/styles/app.css
, the relative path will now be incorrect.
I have 2 ideas to fix this:
asset-path("rails.png")
in your CSS files and it's written.Pros: looks simple to implement.
Cons: this is magic, and your editor won't like it.
.css
file is built, we can also have it output an importmap (also, it would be great to expose that importmap - or perhaps "embed" it in the .css
file for simplicity if possible in dev mode). We can, in theory, use this importmap to do this logic:A) Determine that the background-image: url('../../images/login-bg.png');
line came from assets/styles/tools/base.scss
B) Determine that this file lives one directory deeper than the source, assets/styles/app.scss
.
C) Adjust the path accordingly to ../images/login-bg.png'
This might be trickier to implement - I've never parsed a sourcemap for info - but would be a completely clean solution. This is also how resolve-url-loader
from Webpack works - https://github.com/bholloway/resolve-url-loader/blob/HEAD/packages/resolve-url-loader/docs/how-it-works.md#the-solution
I'm not able to reproduce the CI errors locally ... and it seems to me when the option PR was merged it worked.
If someone here can help me figure out what's happening and how to fix it ?
๐
I get errors with this config, using symfony 7/flex with sass-bundle:.v0.7.0 (also reproducible in v0.6.0), only when running in prod.
symfonycasts_sass:
root_sass:
- '%kernel.project_dir%/assets/styles/app.scss'
sass_options:
trace: true
load_path: ['assets/vendor', 'assets/styles']
when@prod:
sass_options:
source_map: false
style: compressed
output when running in dev:
php bin/console cache:clear
// Clearing the cache for the dev environment with debug true
[OK] Cache for the "dev" environment (debug=true) was successfully cleared.
Output when running in prod
APP_ENV=prod php bin/console cache:clear
In FileLoader.php line 178:
Container extension "sass_options" is not registered in config/packages/symfonycasts_sass.yaml (which is being imported from "src/Kernel.php").
In ContainerBuilder.php line 222:
Container extension "sass_options" is not registered.
SassBinary.php: 135
file_exists('/etc/alpine-release') ? 'linux-musl' : 'linux';
On bin/console sass:build -> critical Error because System didnt allow to check this path.
Fixed it by hardcoding the variable to "linux"
In the documentation for integrating Bootstrap, it is recommended to composer require twbs/bootstrap
then @import '../../vendor/twbs/bootstrap/scss/bootstrap'
. It becomes cumbersome, tedious, ugly, etc. to maintain relative pathing like that. If you have to move a file, you must update these paths.
To make matters worse, I have my own bundle with a Resources/public
directory that copies some Sass into the public
directory of the Symfony project. So now I have to think like this:
/* vendor/org/style-bundle/src/Resources/public/scss/style.scss */
// this file (style.scss) will be copied to /public/bundles/orgstyle/scss/style.scss
// so we need to reference the Bootstrap vendor files from that location
@import '../../../../vendor/twbs/bootstrap/scss/bootstrap';
I could of course not put the Sass file in the public directory, but my import would still look ugly:
/* vendor/org/style-bundle/src/Resources/scss/style.scss */
@import '../../../../../twbs/bootstrap/scss/bootstrap';
I don't think the --load-path
option would necessarily need to be exposed to the developer, but it would be nice if the bundle provided some basic/common load paths like this:
--load-path=/absolute/path/to/project/node_modules --load-path=/absolute/path/to/project/vendor
Then we can at least have more readable/maintainable Sass imports for 3rd party code:
@import 'twbs/bootstrap/scss/bootstrap';
See: SymfonyCasts/tailwind-bundle#22
Also, this option is undocumented and should be documented.
AND, if the user just does:
root_sass: 'assets/styles/foo.scss'
We should normalize that into an array for them
I tried to deploy my local project to my hoster and the sass:build
command is failing.
I think I'm missing something very obvious but cannot see it. As the screenshot shows it errors that the file /html/releases/19/var/dart-sass/src/dart
is not found. But that file is definitely there. I even tried with different rights (755, 777, 700) but always with the same outcome.
On my local DDEV project that command runs fine inside the container.
What am I not seeing?
In SassBinary.php line 150:
[Exception]
No matching machine found for Windows platform (Machine: i586).
The current implementation of the construction of the path for Sass binary relies on the expectation that the main entry point is always named sass
:
sass-bundle/src/SassBinary.php
Lines 162 to 165 in aa47da8
But this is not true for Windows, where it is a sass.bat
. Effectively it results in a re-download of the Sass distributive for each build due to this logic:
sass-bundle/src/SassBinary.php
Lines 37 to 40 in aa47da8
Correct implementation of the getDefaultBinaryPath
method would be:
private function getDefaultBinaryPath(): string
{
return $this->binaryDownloadDir.'/dart-sass/sass'.(str_contains(strtolower(\PHP_OS), 'win') ? '.bat' : '');
}
There is also one more related and Windows-specific issue:
Normally after download bundle tests that download results in the appearance of the Sass binary and throws an exception if it is not so:
sass-bundle/src/SassBinary.php
Lines 109 to 112 in aa47da8
However, for Windows, no such check is applied because there is a separate branch for archive extraction that ends with unconditional return
.
sass-bundle/src/SassBinary.php
Lines 87 to 97 in aa47da8
Because of this, in case if Sass binary download will not cause the Sass compiler to actually appear in the filesystem it will not be reported.
Hi,
As described in the docs, we should be able to configure a binary path for sass
executable:
symfonycasts_sass:
binary: 'node_modules/.bin/sass'
After searching in the code, it seems the option has completely disappeared.
I think it should this feature should be available to users.
This has 2 effects:
quietDeps
option exists for instance (exposed as --quiet-deps
in the CLI)It should be possible (even if it's not a super normal thing to do) to combine this bundle and https://github.com/SymfonyCasts/tailwind-bundle.
To do that, there could be a central asset-mapper-build-bundle
which defines a command like assets:build
. Then, this bundle and TailwindBundle could hook into that. This would allow to:
A) Compile the SASS from an app.scss
file to pure CSS.
B) Then process that pure CSS through Tailwind.
Additionally, it would be GREAT if the new bundle could hook into the asset-map:compile
command so that, before the files are actually compiled, the "build" pipeline were called. So, instead of needing to run assets:build
and then asset-map:compile
during deploy, you could just run asset-map:compile
and it would trigger the assets:build
system. This would likely require a new event in the core AssetMapper asset-map:compile
command.
This bundle is downloading dart-sass automatically which is perfectly ok when running on windows, macos, linux. Except for some distro's like alpine. Alpine is quite popular for people using docker because of the image size. But this comes with a different libc, which is not the version dart-sass is compiled with.
Their is no alternative download available with musl-libc. See sass/embedded-host-node#155
I'm reacting to the PR #47 (Add a note about dropping Sass in favor of native CSS) as i 100% share this vision....
But :)
I'll have a need for a year or two i guess for the only remaining sass feature i still use : import / include.
I know HTTP2 may seem to be the answer-to-everything, but with layers and scope coming, there is still imho a need for packed / ordered CSS files (and for serial CSS-splitter like me that can avoid a LOT of useless HTTP requests, even if shared in one connection).
I'd like a simple feature to "compile" (big word there) multiple CSS into one...
My guess would be that this need is a common one in the "from SASS to CSS" transition, but I'd totally understand if you think this should be in a symfonycast/css-bundle, or a simon/css-yourself one ๐
Or maybe @weaverryan this should only be a dedicated "compiler" inside AssetMapper ?
WDYT ?
Hello,
I am trying to migrate from encore, and need to support some previous Bootstrap SASS modifications, so I found this library.
Problem:
.css
though.Troubleshooting:
bin/console sass:build
does output compiled CSS to var/sass/admin.output.css
var/dart-sass/sass assets/styles/admin.scss
returns compiled CSSbin/console sass:build
and then asset-map:compile
works, the browser gets loadable CSSbin/console sass:build -v
The missing step is that which I underlined from the documentation below:
My environment, relevant code snippets:
I am running the app in Docker to reflect my prod environment. Caddy in front of PHP-FPM Symfony. In development I bind-mount everything in the project folder into the Symfony container. (NOTE: I have also run bin/console sass:build
from within the container; it produces the files, but the browser still receives SCSS content that it can't parse.)
Since admin.scss
is not the default filename, I have configured it like:
# config/asset_mapper.yaml
framework:
asset_mapper:
# The paths to make available to the asset mapper.
paths:
- assets/
symfonycasts_sass:
root_sass:
- 'assets/styles/app.scss'
- 'assets/styles/admin.scss'
{# admin.html.twig #}
...
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('styles/admin.scss') }}">
{% endblock %}
...
assets/styles/admin.scss
files start with/* assets/styles/admin.scss
@import "./helper/_variables";
@import "../../vendor/twbs/bootstrap/scss/bootstrap";
@import "./components/gedmo-history";
$navbarwidth: 13rem;
$sidebarbutton: 40px;
$sidebartransition: 0.4s;
.text-grey-0 { color: $grey-0 !important; }
...
dart-sass
and contents of var/sass/admin.output.css
correctly inserted the imports shown above** My thoughts **
So the missing step (swapping the compiled CSS contents upon request) seems to be where something is going wrong (?). But looking in this repo, I am not sure how that mechanism works. If someone could point me in the right direction that would be great.
Thanks
Hi,
Thanks for providing this bundle!
Currently we need to manually add every root sass files that we write under the symfonycasts_sass.root_sass
config.
Usually non root files are prefixed with _
, while root file aren't. It'd be great to have symfonycasts_sass.root_sass
support regular expressions.
That way we could simply set one line there that automatically lists all root files and forget about it. It would also avoid errors when we forgot to add the entry and the unlisted scss file is then silently mapped to a css file that actually still contains sass.
This is somewhat linked to #41 which attempts to make clearer what files are being built.
Symfony version : 7.0
PHP version : 8.2
OS : Alpine 3.18 (in a Docker container)
When I try to build (or watch) sass files, I get an error.
php bin/console sass:build --watch -v
! [NOTE] Executing Sass (pass -v to see more details).
Command:
'/var/www/html/var/dart-sass/sass' '/var/www/html/assets/styles/app.scss:/var/www/html/var/sass/app.output.css' '--watch' '--embed-source-map'
In Process.php line 429:
[Symfony\Component\Process\Exception\ProcessSignaledException]
The process has been signaled with signal "11".
Exception trace:
at /var/www/html/vendor/symfony/process/Process.php:429
Symfony\Component\Process\Process->wait() at /var/www/html/vendor/symfonycasts/sass-bundle/src/Command/SassBuildCommand.php:46
Symfonycasts\SassBundle\Command\SassBuildCommand->execute() at /var/www/html/vendor/symfony/console/Command/Command.php:279
Symfony\Component\Console\Command\Command->run() at /var/www/html/vendor/symfony/console/Application.php:1049
Symfony\Component\Console\Application->doRunCommand() at /var/www/html/vendor/symfony/framework-bundle/Console/Application.php:125
Symfony\Bundle\FrameworkBundle\Console\Application->doRunCommand() at /var/www/html/vendor/symfony/console/Application.php:318
Symfony\Component\Console\Application->doRun() at /var/www/html/vendor/symfony/framework-bundle/Console/Application.php:79
Symfony\Bundle\FrameworkBundle\Console\Application->doRun() at /var/www/html/vendor/symfony/console/Application.php:169
Symfony\Component\Console\Application->run() at /var/www/html/vendor/symfony/runtime/Runner/Symfony/ConsoleApplicationRunner.php:49
Symfony\Component\Runtime\Runner\Symfony\ConsoleApplicationRunner->run() at /var/www/html/vendor/autoload_runtime.php:29
require_once() at /var/www/html/bin/console:11
sass:build [-w|--watch]
Do you have any idea?
Currently, we hardcode the version of the binary that we download. Added this as a configuration option probably makes sense. (This is also true for https://github.com/SymfonyCasts/tailwind-bundle)
Hello,
I try this new amazing bundle, but maybe I miss something.
When I create e.g a home.scss, and add <link rel="stylesheet" href="{{ asset('styles/home.scss') }}">
in my home.html.twig template
and then run
php bin/console sass:build --watch
I obtain this error message in CLI
Could not find Sass file: "/path/to/my/projetc/assets/styles/app.scss"
If I rename in app.scss it works. Is it impossible to use another file name ?
Thanks for your help
Here are the options that make sense to expose:
style
(in prod, you should compile the Sass files in compressed style to have a smaller CSS file). This could be a smart default in the bundlequietDeps
(this depends on #28 to be useful)embedSources
: whether the generated source map should embed the sources of the original Sass files, to allow the browser dev tools to display it without being able to fetch it from the server (should probably be a smart default to turn it on in dev mode)Maybe --fatal-deprecation
and --future-deprecation
could also be exposed to have feature parity.
When the package builds, a .map
file is output. But, we're not currently making it available.
Another option is to pass --embed-source-map
and embed it directly in the CSS file (in dev
mode only).
When importing bootstrap sass from vendor, like in documentation (https://symfony.com/bundles/SassBundle/current/index.html#using-bootstrap-sass), if bootstrap is older version, deprecations warnings appear on sass:build (DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.).
Setting quiet-deps:true in config/symfonycasts_sass.yaml does not work in this case.
Can we somehow set sass imported from vendor folder as dependancy?
Hey everybody,
I'm trying to disable the output of the link to a source map URL - I don't want to have a source map comment in my generated CSS file. My first thought was: this is easy, just set inside sass_options node source_map: false
- didn't work. Ok, just set embed_source_map: false
- didn't work.
Command: '/var/www/html/var/dart-sass/sass' '/var/www/html/assets/website/styles/main.scss:/var/www/html/var/sass/main.output.css' '--style=expanded' '--no-source-map' '--no-embed-source-map'
--embed-source-map isn't allowed with --no-source-map.
So, it seems that the combination of these options is not allowed - can you guys help me out and tell me how to disable it.
Thank you in advance!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.