I am trying to instruct Babel to not transpile a specific directory (in the same way that it excludes node_modules).
I am using Next.js. When I run the build, it becomes extremely slow because babel is crawling through a massive js file until it gives this message:
The code generator has deoptimised the styling of /PATH/ as it exceeds
the max of 500KB.
in babel.config.json:
{
...,
"exclude": ["node_modules", "prisma"]
}
Babel Version: 7.12.13
Related
I want to use the plugin https://github.com/iamfrntdv/postcss-increase-text-sizes to make my fonts larger in the whole css and spit it out into a separate file.
That's why I want to use postCss with webpack in Symfony.
I configure it as follows:
in the webpack.config.js file he writes .enablePostCssLoader()
I create the postcss.config.js file with the following configuration
module.exports = {
from: './web/assets/src/css/custom.css',
output: './output.css',
plugins: [
require("postcss-increase-text-sizes")({
fontSizeMultiplyBy: 1.2,
lineheightMultiplyBy: 1.2,
selectorsBlackList: ["h2"]
}),
],
};
Unfortunately, I do not get anything in the "output", no file named output.css is created after reloading encore with npm run watch or npm run build
Webpack does not report the error that it "does not see" the file even if you type "test test" in the from: directive.
Instead, it throws an error if there is something "wrong" (eg a syntax error) in the postcss.config.js file.
I am attempting to set up a nuxt project with scss. I added the following packages to my project:
"sass": "^1.37.0",
"sass-loader": "10",
and I updated nuxt.config.js to say the following to point to my new scss main file:
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'~/assets/sass/main.scss'
],
I had to use older versions because i was getting errors with certain functions I was using but i managed to get it working correctly on my local machine, and it builds just fine repeatedly as I update code as well.
I am now trying to deploy to staging on a Linux/nginx server and I am getting the following errors when building npm run build:
ERROR in ./assets/sass/main.scss (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./assets/sass/main.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(1:1) postcss-custom-properties: <css input> Unknown word
> 1 | var(--font-size-2)/var(--font-ratio)
| ^
It looks like it's using css builder instead of sass builder! Does anyone know how to fix this? I doublechecked that the files on the server include the sass-loader and that the config is pointing to my .scss file, and i checked the documentation which states that Nuxt will automatically choose the correct loader.
What am I doing wrong?
Ok, so I've created a new ASP.Net 5/MVC 6 project in Visual Studio 2015 Preview. In keeping with our current method of doing things, for styling I want to use .less files. Creating the files is straightforward, but Web Essentials no longer compiles them.
So my question is this: what precisely do I need to do to get my .css files generated when I save the .less files?
Based on my adventures getting Typescript to work nicely, I will have to use Grunt to accomplish this task, but I am brand-new to Grunt and so I'm not sure how one would do it?
Please help!
With VS 2015 Web Essential is split into multiple extensions you can download
the Web Compiler extension from here and it also has details on how to use it.
It is certainly not elegant as it used to be, but if you are using existing project and want to use a compiler for LESS then this may do the basic job.
So here's how to do it (compile on build and non-elegant compile on save):
Step 1
Open up your package.json file (it's in the root of your project) and add these lines:
"grunt-contrib-less": "^1.0.0",
"less": "^2.1.2"
Obviously you can change the version numbers (you'll get helpful intellisense), these are just the current versions.
Step 2
Right-click on the NPM folder (under Dependencies) and click Restore Packages. This will install less and grunt-contrib-less.
Step 3
Once those packages are restored, go to your gruntfile.js file (again, in the root of the project). Here, you'll need to add the following section to grunt.initConfig
less: {
development: {
options: {
paths: ["importfolder"]
},
files: {
"wwwroot/destinationfolder/destinationfilename.css": "sourcefolder/sourcefile.less"
}
}
}
You'll also need to add this line near the end of gruntfile.js:
grunt.loadNpmTasks("grunt-contrib-less");
Step 4
Then just go to View->Other Windows->Task Runner Explorer in the menu hit the refresh icon/button, then right-click on less under Tasks and go to Bindings and tick After Build.
Hooray, now less files will compile and we (I) learned about grunt, which seems really powerful.
Step 5: Compiling on save
I still haven't got this working to my satisfaction, but here's what I've got so far:
As above, add another NPM package grunt-contrib-watch (add to package.json, then restore packages).
Then add a watch section in gruntfile.js, like this (obviously this can work for other types of files as well):
watch: {
less: {
files: ["sourcefolder/*.less"],
tasks: ["less"],
options: {
livereload: true
}
}
}
So you'll now have something like this in your gruntfile.js:
/// <binding AfterBuild='typescript' />
// This file in the main entry point for defining grunt tasks and using grunt plugins.
// Click here to learn more. http://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409
module.exports = function (grunt) {
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/lib",
layout: "byComponent",
cleanTargetDir: false
}
}
},
watch: {
less: {
files: ["less/*.less"],
tasks: ["less"],
options: {
livereload: true
}
}
},
less: {
development: {
options: {
paths: ["less"]
},
files: {
"wwwroot/css/style.css": "less/style.less"
}
}
}
});
// This command registers the default task which will install bower packages into wwwroot/lib
grunt.registerTask("default", ["bower:install"]);
// The following line loads the grunt plugins.
// This line needs to be at the end of this this file.
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks("grunt-contrib-watch");
};
One can then simply set this task to run on Project Open (right-click on watch under Tasks in the Task Runner Explorer (it's under View->Other Windows in the top menu) and you're done. I would expect you'd have to close and re-open the project/solution to get this to kick in, otherwise you can manually run the task.
(Note: there is now a new question asked here directly concerning sass. I tried to alter the question and tags in this question to include sass, but someone didn't allow it.)
I would like to add the answer to the same question for sass (.scss). The answer is so related I think these may best be combined as two answers in this same post (if you disagree, please let me know; else, we might add "or sass" in the post title?). As such, see Maverick's answer for some fuller details, here's the nutshell for sass:
(Pre-step for Empty Projects)
If you started with an empty project, first add Grunt and Bower:
Right click solution -> Add -> 'Grunt and Bower to Project' (then wait for a minute for it to all install)
package.json:
"devDependencies": {
"grunt": "^0.4.5",
"grunt-bower-task": "^0.4.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-contrib-sass": "^0.9.2"
}
(FYI: grunt-contrib-sass link)
Then:
Dependencies -> right-click NPM -> Restore Packages.
gruntfile.js
1) Add or make sure these three lines are registered near the bottom (as NPM tasks):
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-sass");
2) Again in gruntfile.js, add init configurations, something like the following.
{ Caveat: I am no expert on such configurations. I found the sass configuration on an excellent blog post some time ago that I can't locate at this time in order to give credit. The key was I wanted to find all files in the project within a certain folder (plus descendants). The following does that (notice "someSourceFolder/**/*.scss", and see important related note here). }
// ... after bower in grunt.initConfig ...
"default": {
"files": [
{
"expand": true,
"src": [ "someSourceFolder/**/*.scss" ],
"dest": "wwwroot/coolbeans", // or "<%= src %>" for output to the same (source) folder
"ext": ".css"
}
]
},
"watch": {
"sass": {
"files": [ "someSourceFolder/**/*.scss" ],
"tasks": [ "sass" ],
"options": {
"livereload": true
}
}
}
Now follow the instructions for Task Runner Explorer as given in the other answer. Make sure to close and reopen project. It seems you have to run (double click) 'watch' (under 'Tasks') every time the project is started to get the watch watching, but then it works on subsequent saves.
I've been trying to get django-pipeline setup so that I can compile and concat my assets. I would also like to remove the compiled css files from my repository to avoid merge conflicts in pull requests.
I've been trying to get django-pipeline to compile the files as part of the deploy process but can't figure this out. I use SASS to write my CSS. My pipeline settings look like this:
STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage'
PIPELINE_CSS = {
'main': {
'source_filenames': (
'sass/blah.scss',
'sass/main.scss',
),
'output_filename': 'css/main.css',
'extra_context': {
'media': 'screen',
},
},
}
PIPELINE_COMPILERS = (
'pipeline.compilers.sass.SASSCompiler',
)
This works great locally, and generates .css files in my /sass folder, which are then combined to make the main.css file. If I check those CSS files into my git repository and push to Heroku, it also works fine. However, if I ignore them, which I would like to do so that I'm not committing compiled files, then django-pipeline can't find the files to combine. I'm not sure how I can get the sass compilation working on Heroku and I can't find anything about it.
I can provide more information about my setup if needed, hopefully somebody knows something about this!
OK, here's how I got this working using Compass to compile my SASS files.
Use multiple Heroku buildpacks - Heroku Buildpack Multi
Put the following in your .buildpacks file
https://github.com/heroku/heroku-buildpack-ruby.git
https://github.com/heroku/heroku-buildpack-nodejs
https://github.com/heroku/heroku-buildpack-python.git
Create a Gemfile with compass and any other requirements you have. Here's mine:
source 'https://rubygems.org'
ruby '1.9.3'
gem 'bootstrap-sass'
gem 'compass'
Create a config.rb file. Here's mine. As you can see it, requires the bootstrap-sass that I included in my Gemfile:
# Require any additional compass plugins here.
require 'bootstrap-sass'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "app_folder/static/css"
sass_dir = "app_folder/static/sass"
images_dir = "app_folder/static/images"
output_style = :compact
more details on config.rb can be found here
Install node packages (django-pipeline wants yuglify). You'll need a package.json file:
{
"dependencies": {
"yuglify": "0.1.4"
},
"engines": {
"node": "0.10.x",
"npm": "1.3.x"
},
"repository": {
"type": "git",
"url": "your repo url"
}
}
almost ready...
when Heroku runs the ruby buildpack, it will look for a rake task called assets:precompile. So now you'll need to add a Rakefile with the following:
namespace 'assets' do
desc 'Updates the stylesheets generated by Sass/Compass'
task :precompile do
print %x(compass compile --time)
end
end
this will put compile your stylesheets. You need to make sure you set the output (back in config.rb) to the place that django-pipeline is looking for CSS files (shown in the original question).
You should get rid of this part in the original question as django-pipeline isn't compiling your SASS for you:
PIPELINE_COMPILERS = (
'pipeline.compilers.sass.SASSCompiler',
)
That should be it! Deploys should just work now, and it didn't really add a significant amount of time to my deploy process.
All in all, it amounts to a lot of setup, but for me it was well worth it as I no longer have to commit compiled files into the repository, which was causing a lot of merge conflicts when working with branches and pull requests.
I would like to figure out how to do this using only two buildpacks (obviously only one would be ideal but I don't know if it's possible). The problem is trying to find binary paths so that pipeline can do it's thing when it doesn't find the defaults. I'm not sure if the reason I can't do this is because of how Heroku is installing things, or because there is a bug in django-pipeline, but right now this is good enough for me.
If you try this and it doesn't work for you, let me know, if I missed something I'm happy to make updates.
I don't want to take away from your excellent solution, but I tried this today and found a few differences that made things simpler for me - likely due to updates in django-pipeline and/or Heroku. My full solution is below, in case anyone else comes looking.
Add the 3 buildpacks to Heroku:
heroku buildpacks:set https://github.com/heroku/heroku-buildpack-ruby.git
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-python.git
Add django-pipeline and django-pipeline-compass to requirements.txt:
django-pipeline==1.5.2
django-pipeline-compass==0.1.5
Create a Gemfile to install Sass:
source 'https://rubygems.org'
ruby '2.1.5'
gem 'bootstrap-sass'
Create a package.json file to install Yuglify:
{
"dependencies": {
"yuglify": "0.1.4"
},
"engines": {
"node": "0.10.x",
"npm": "1.4.x"
}
}
I did not need a Rakefile or config.rb.
For reference, here are relevant settings from my settings.py:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, '_generated_media')
STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'pipeline.finders.PipelineFinder',
)
PIPELINE_COMPILERS = (
'pipeline_compass.compiler.CompassCompiler',
)
PIPELINE_YUGLIFY_BINARY = os.path.join(BASE_DIR, 'node_modules', '.bin', 'yuglify')
And I also had to add this entry to urls.py:
url(r'^static/(?P<path>.*)$', serve, kwargs={'document_root': settings.STATIC_ROOT})
Hope it helps someone!
You may need to set PIPELINE_SASS_BINARY so that django-pipeline can find your SASS compiler.
You can use the libsass compiler for django-pipeline that uses Sass packaged as a Python package:
pip install libsasscompiler
Update your config:
PIPELINE['COMPILERS'] = (
'libsasscompiler.LibSassCompiler',
)
The default Yuglify compressor is also a problem on Heroku, which you can temporarily overcome by disabling it. This is my config for enabling Sass on Django for example:
PIPELINE = {
'COMPILERS': (
'libsasscompiler.LibSassCompiler',
),
'STYLESHEETS': {
'main': {
'source_filenames': (
'styles/main.scss',
),
'output_filename': 'css/main.css'
},
},
# disable the default Yuglify compressor not available on Heroku
'CSS_COMPRESSOR': 'pipeline.compressors.NoopCompressor',
'JS_COMPRESSOR': 'pipeline.compressors.NoopCompressor'
}
The longer-term solution would be to move towards a JS-only build toolchain (as most projects are doing). Rails integrates pretty nicely with Webpack for example and is maintained by the same team. Until that happens in Django (if ever) and trickles into the Heroku Python builpack, you can use Heroku's multiple buildpacks and add an official Node buildpack step that runs npm install; npm run build for you.
I'm trying to get the default Yeoman Webapp to work with Assemble.io.
I followed this tutorial Using assemble.io with yeoman.io’s webapp Gruntfile
Got it up & running (partially), the first problem I have is that livereload isn't kicking in when changes are made to the .hbs files. When I manually refresh, I can see the changes that were made.
This is my Grunt file.
Second problem is that 'grunt build' gives me the following error:
Running "requirejs:dist" (requirejs) task
{ [Error: Error: Missing either an "out" or "dir" config value. If using "appDir" for a full project optimization, use "dir". If you want to optimize to one file, use "out".
at Function.build.createConfig ([MY DIRECTORY]/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:25109:19)
]
originalError: [Error: Missing either an "out" or "dir" config value. If using "appDir" for a full project optimization, use "dir". If you want to optimize to one file, use "out".] }
I googled around & when I add the following to requirejs:dist:options
appDir: '<%= yeoman.app %>/', dir: 'build'
Then this error is solved, but the next appears:
No "concat" targets found.
Warning: Task "concat" failed. Use --force to continue.
Versions:
Yeoman 1.0.4
Node 0.10.21
Bower 1.2.7
Grunt-cli 0.1.9
Grunt 0.4.1
Anyone seeing the problem? Thanks!
See this line in your gist. It's trying to call a task called concat in your Gruntfile, but that task doesn't exist. There may have been a change with the Yeoman webapp generator or you might have had a copy/paste issue or something. The assemble part of your Gruntfile looks fine.
I think you can remove the concat and carry on.