I have an issue with running lessc command when there is hierarchical imports. My folder structure is like this:
(root)/
|--- website
|--- styles
|--- master.less
|--- library
|--- testDir
|--- child.less
|--- test.less
The short version of master.less:
#import url('../../library/test.less');
The short version of test.less:
#import url('/testDir/child.less');
When I run lessc website/styles/master.less website/styles/master.css, I am given FileError: '/testDir/child.less' wasn't found. Tried - /testDir/child.less, etc.
Note: It is not viable for me to use --include-path=./library/testDir option, because I have many instances of these hierarchical imports in my less files.
Any other option that I am missing, or a workaround?
Related
I have a CSS file that I want to upload to npm. My project's folder structure is as follows:
my-project (folder)
|
+---- css (folder)
|
+---- my-project.css
|
+---- my-project.min.css
When I try to upload my project to NPM, it asks for an entry point, where the default is set to index.js. For my case where there are only 2 files inside a folder called css, what should it be? Moreover, what is the meaning of the entry-point for an npm project?
Entry point is a JavaScript file that gets called when your module is needed.
By common practice, it is usually given the name "app.js" or "index.js" (your case).
The entry point is also the path that will be used to access your module.
CSS files cannot be entry points.
I'm trying to setup a file watcher in PyCharm for my SASS files. I've followed the official guide and it worked jsut fine (https://www.jetbrains.com/help/pycharm/transpiling-sass-less-and-scss-to-css.html#)
Now I'd like to change the destination of the compiled CSS files to a specific folder, relative to the SASS file. Basically, the output directory should be ../css/ when starting from the SASS file, because my structure looks like this:
app1/
static/
css/
myfile.css
sass/
myfile.sass
app2/
static/
css/
myfile2.css
sass/
myfile2.sass
I'm not sure I understand what values I should put in arguments and output paths to refresh. I'm currently using the default settings (https://imgur.com/a/rrIJHeR)
I solved it. For anyone struggling with the same issue, here's how I fixed it:
Arguments = sass\$FileName$:css\$FileNameWithoutExtension$.css
Output = css\$FileNameWithoutExtension$.css
Working Directory = $FileParentDir$
Here's an image of the setup :
I'm trying to include some CSS in my create-react-app project. The CSS is from a 3rd party NPM package and therefore its in the node_modules directory.
I tried:
import '/node_modules/packagename/css/styles.css';
But I get the error:
Module not found: You attempted to import /node_modules/packagename/css/styles.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.
I would prefer to not move the CSS to src/ so it can be updated via NPM. I could symlink but as I develop on windows and deploy to linux this isn't ideal.
What's the best way from me to include the CSS?
Find the path of the css file
example: ./node_modules/packagename/dist/css/styles.css
Import using the path related to node_modules (anything after node_modules/ )
import 'packagename/dist/css/styles.css'
relative paths are unnecessary from node_modules and should not be the recommended way to include the css
all you have to do is leave off the preceding slash and node_modules directory same as importing a js package from node modules:
import 'package/css/style-to-import.css'
when using (s)css imports, use the tilde (~) to indicate an absolute import:
#import '~package/css/style-to-import.css'
A distinction not made from the previous answers is it depends on where you're importing the CSS into; a component or into a stylesheet.
If you're importing a node_modules stylesheet into a component, you don't need a relative path like mentioned above.
import 'packagename/dist/css/styles.css'
However, if you're importing a node_modules stylesheet into a CSS/SCSS file, you need to use tilde ~.
#import '~packagename/dist/css/styles.css'
I found this a bug of a pain. specially my webpack.config.js is not running anymore.
specially react app is now running in src folder and the import files need to be in the public folder.
i was using materialize-social and found out the easiest way is to move node_module file folder "materialize-social" to the public directory any other way please commend it down.
I have a set of scss file that I package as a library for reuse in several other web applications. I am aware that in my package.son for js files, I can specify the entry point in main property. Not sure how to specify this for scss file libraries. I have a main.scss that includes all the scss files that I developed and that imports the thirdparty sass files that need. I looked up how bootstrap the scss files and found that they don't really mention the main stylesheet in the package.json.
Do I need to define the main property in the package.json or leave it documented on how the scss files need to be resolved from node_modules?
If you're using node-sass (or something that depends on node-sass) to compile your sass then you can use sass-module-importer to import your own main.scss.
In your repository with your main.scss file you just need to set the "style" or "main" property in your package.json to point to your main.scss file (example here: https://github.com/bameyrick/sass-helpers/blob/master/package.json).
If the third party scripts you import into your main.scss file do not have a style or main property in their package.json, then the imports in your main.scss file will need to point to that file from the node_modules folder (e.g. #import './node_modules/third-party-lib/src/index.scss') because sass-module-importer will not be able to resolve that dependency for you.
I would like to package a Python3-PyGObject program with pynsist. The repository has an example for PyGTK and it made me think that it shouldn't be too hard to change the example.
The example can be found here:
https://github.com/takluyver/pynsist/tree/master/examples/pygtk
In this file (https://github.com/takluyver/pynsist/blob/master/examples/pygtk/grab_files.sh) I think one just has to grab the files targeting GTK 3 (http://www.gtk.org/download/win32.php):
wget -O gtkbundle.zip http://win32builder.gnome.org/gtk+-bundle_3.6.4-20130921_win32.zip
wget -O pygobject.exe http://sourceforge.net/projects/pygobjectwin32/files/pygi-aio-3.14.0_rev12-setup.exe/download
wget -O pycairo.zip http://ftp.gnome.org/pub/gnome/binaries/win32/dependencies/cairo_1.10.2-2_win32.zip
I am not sure what to do with the fourth line, because it is my current understanding that those bindings should already be inside the gtk or pygobject bundle:
wget -O pygtk.exe http://ftp.gnome.org/pub/GNOME/binaries/win32/pygtk/2.24/pygtk-2.24.0.win32-py2.7.exe
I then tried to customize this file (https://github.com/takluyver/pynsist/blob/master/examples/pygtk/installer.cfg) to include (use gi instead of gi.repository):
[Include]
packages=gi
This resulting error is:
raise ExtensionModuleMismatch(extensionmod_errmsg % ('Windows', path))
nsist.copymodules.ExtensionModuleMismatch: Found an extension module that will not be usable on Windows:
/usr/lib/python3/dist-packages/gi/_gi.cpython-34m-x86_64-linux-gnu.so
Put Windows packages in pynsist_pkgs/ to avoid this.
Does anyone know what the correct approach for a program (like e.g. one of these: https://python-gtk-3-tutorial.readthedocs.org) would be?
Edit 1
After packaging and installing the program on Windows, starting the test-program produces the following traceback:
Traceback (most recent call last):
File "C:\Program Files (x86)\hellogtk\hellogtk.launch.pyw", line 31, in <module>
from gtk_test import main
File "C:\Program Files (x86)\hellogtk\pkgs\gtk_test.py", line 3, in <module>
from gi.repository import Gtk
File "C:\Program Files (x86)\hellogtk\pkgs\gi\__init__.py", line 42, in <module>
from . import _gi
ImportError: DLL load failed: The specified module could not be found.
It is odd that this ImportError occurs because there is a _gi.pyd-file in the same directory (gi) as the __init__.py
This is the current layout:
- directory
|- pynsist_pkgs
|-- cairo
|--- _cairo.pyd
|--- __init__.py
|-- gi
|--- _gobject
|--- overrides
|--- repository
|--- __init__.py
|--- _gi.pyd
|--- ...
|-- gtk
|--- bin
|--- etc
|--- lib
|--- manifest
|--- share
|-- dbus
|--- __init__.py
|--- ...
|-- gnome
|--- ...
|-- pygtkcompat
|--- ...
|-- _dbus_bindings.pyd
|-- _dbus_glib_bindings.pyd
|-- ...
|- gtk_test.py
|- grab_files.sh
|- installer.cfg
|- gtk_preamble.py
And I used the py-3.4-64 folder of the pygobject bindings. The Linux I am creating the package on is 64 bit, and the Windows I am running the program is also 64 bit.
Edit 2:
Using Dependency-Walker I can see that 2 DLLs are missing: GPSVC.DLL and IESHIMS.DLL.
Edit 3:
I found those 2 DLLs on the system and copied them in different directories of the test-program, but it didn't work.
Edit 4:
This might be useful for the import-error:
import gtk/glib produces ImportError: DLL load failed
I worked together with Thomas K, the author of pynsist, to solve this. And I do want to advertise that it is a great tool, with very good support, and it makes packaging orders of magnitudes easier in my opinion.
There were a number of mistakes in my approach (see question), so it might be easier to just describe the correct approach:
Download dependencies
The only dependency needed for a program that only imports:
from gi.repository import Gtk
is the most recent pygi-aio (currently pygi-aio-3.14) bundle that can be downloaded here (The example in the pynsist-repository has a download script, but i might need to be updated for newer releases):
https://sourceforge.net/projects/pygobjectwin32/files/
Extract dependencies
The PyGObject/PyGI example that has now been merged into the pynsist-repository, comes with a script that extracts the necessary dependencies from the bundle (See: https://github.com/takluyver/pynsist/tree/master/examples/pygi_mpl_numpy).
Most importantly it extracts the contents of the bindings zip file (Modify the script for the targeted Python version and bitness) and copies them into the pynsist_pkgs folder:
- cairo
- dbus
- gi
- gnome
- pygtkcompat
Then it extracts and copies the subdependencies into the pynsist_pkgs/gnome/ folder. As lazka pointed out, the minimum requirements for a typical minimal Gtk-program are (each library has a pygi/noarch and pygi/[TargetedArchitecture] zip file):
- ATK
- Base
- Gdk
- GDKPixbuf
- GTK
- JPEG
- Pango
- WebP
- TIFF
Build the installer
The installer was then build in my case using:
python3 -m nsist installer.cfg
The installer.cfg is also in the repositories example folder. It only requires gnome to be listed (The subdependecies in the gnome folder behave as one unit).
Note about the pygi-aio bundle
When the pygi-aio is installed on a Windows-machine, the installer performs some post-installation compiling steps. This might become an issue if you are using this approach, because it only extracts the dependencies. In some cases you might need to run an exe file (comes with the bundle) and copy the compiled files back into your build directory. I describe the only problem I had here:
https://github.com/tobias47n9e/innsbruck-stereographic/issues/1
And there is a bug report with more information here:
https://sourceforge.net/p/pygobjectwin32/tickets/12/
Working example
You can get the example here:
https://github.com/takluyver/pynsist/tree/master/examples/pygi_mpl_numpy