I am trying to use jquery.datatables using webpacker in rails 6. I have
#app/javascript/packs/application.js
...
require("datatables.net")
require("datatables.net-dt")
...
Then I have
#app/javascript/packs/
#import '../stylesheets/datatables.scss';
and then
#app/javascript/stylesheets/datatables.scss
#import 'datatables.net-dt/css/jquery.dataTables';
but the webpacker-dev-server gives following error
Module not found: Error: Can't resolve '../images/sort_asc.png' in '/Users/app/javascript/packs'
resolve '../images/sort_asc.png' in '/Users/app/javascript/packs'
using description file: /Users/app/package.json (relative path: ./app/javascript/packs)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/app/package.json (relative path: ./app/javascript/images/sort_asc.png)
no extension
The directory structure for datatables.net-dt is as follows
datatables.net-dt
css
images
js
and there are five png images in images folder. Presumably they are background images for the css. How do I load these images, ideally without having to name each one?
Related
Trying to write config.lua for lvim that wiil be separated in different files? that will be included in config.lua with require('<package>'). Everything works if i try i in .config/lvim/ directory, but i get below message, when i run lvim in different directory.
21:43:43 [WARN ] lvim: "Invalid configuration: /home/axr/.config/lvim/config.lua:6: module 'base/search' not found:\n\t
no field package.preload['base/search']\n\tno file './base/search.lua'\n\tno file '/usr/share/luajit-2.1.0-beta3/base/s
earch.lua'\n\tno file '/usr/local/share/lua/5.1/base/search.lua'\n\tno file '/usr/local/share/lua/5.1/base/search/init.
lua'\n\tno file '/usr/share/lua/5.1/base/search.lua'\n\tno file '/usr/share/lua/5.1/base/search/init.lua'\n\tno file '.
/base/search.so'\n\tno file '/usr/local/lib/lua/5.1/base/search.so'\n\tno file '/usr/lib/lua/5.1/base/search.so'\n\tno
file '/usr/local/lib/lua/5.1/loadall.so'" file="init.lua", line=49
Tried to replace / with ., nothing changed.
Checked runtimepath, .config/lvim/ was there.
Tried to replace relative path in require(<path>) with full path.
GitHub repository with files and comments: https://github.com/SATANalexander666/lvim-config
Dont use / or \\ in require()
Only use the . for entering a folder.
Using nvim the .config/nvim/lua folder has to be created manually.
After that it is easy doing to require Lua files.
Example
.config/nvim/init.vim # file
.config/nvim/lua/config.lua # file
.config/nvim/lua/base # folder
.config/nvim/lua/keys # folder
.config/nvim/lua/plugins/core # folder
.config/nvim/lua/plugins/packer # folder
Content of init.vim
lua require("config")
Will be appended/finished to: lua/config.lua
Refer nvim' help: :help lua-package-path
Content of config.lua
-- base
require('base.search') -- Search configs
require('base.indents') -- Indentation configs
require('base.visual') -- GUI configs
require('base.other')
-- keys
require('keys.alias') -- Shortcuts and incapsulation
require('keys.main') -- Keys for built-in features
require('keys.plugins') -- Keys for plugged features
-- plugins
require('plugins.core.use') -- Buil-in plugins that are being used
require('plugins.core.config') -- Configs for built-in plugins
require('plugins.packer.use') -- Packer pluggins that are being used
require('plugins.packer.config') -- Configs for packer plugins
The dot will be used to enter the folder(s) (Linux & Windows)
Refer nvim' help: :help lua-require
In /.config/lvim must be created folder named /lua and all folders required in main config.lua must be moved to this folder, however path to required folders shouldn't be changed. Example: require('base.search'), while actual path is /.config/lvim/lua/base/search.lua.
i need to copy files from node_modules to a directory web/bundles/myBundle/components
But now i have an error :
Error: EISDIR: illegal operation on a directory, open '/srv/project/web/bundles/myBundle/components'
Encore
.setOutputPath('web/bundles/myBundle/')
.setPublicPath('/bundles/myBundle')
.addEntry('myBundle', './app.js')
.copyFiles({
from: './src/project/myBundle/Resources/public/components',
to: 'components',
});
I just need to copy files, i tried that but i dont want to specify addEntry because there's none (empty js file just to solve problem).
If you have any idea or solution, thx !
Change "to:" line to the following
to: 'components/[path][name].[ext]',
The elements in the square brackets are keywords that will be replaced with the real path/filename/extension of each file during the copy process
Final solution, and copy methods explanation (in Symfony project)
for example you got custom website template, you copy its assets into Symfony PROJECT assets/template-name/assets as normal configuration for webpack files to add
in webpack.config.js
.copyFiles(
{ from: './assets/vuesy/assets/images',
includeSubdirectories: true,
to: 'assets/images/[folder]/[name].[ext]',
context: 'assets/vuesy/assets/',
pattern: /.*/
}
)
and here is HOW to build proper folder structure in your public/build directory.
from: - is the place where files are - relative to - webpack.config.js, dont put / at the end but dont forget to use ./ at the begining (in this case assets folder is in the same directory as webpack.config.js)
to: your public/build is defined, from this place you starting build directory structure, add for example assets/images then use [folder] KEY, add / and tell what will be name for final file [name].[ext]
you can add own name for file by adding [myownname-foo-v1-][name] in this part. It generate myownname-foo-v1-realfilename.extension
context: - context is a place FROM WHERE you start digging and copying files..
I have a Storage constant that is used in a file called listingController.js
const storage = Storage({
keyFilename: "../key/keyname.json"
});
Everything works fine when I'm not using Docker but after I create a Docker image and deploy it on server I get the following error:
ENOENT: no such file or directory, open '/key/keyname.json'
at wrapError (/app/node_modules/gcs-resumable-upload/build/src/index.js:17:12)
at /app/node_modules/gcs-resumable-upload/build/src/index.js:235:19
at getToken (/app/node_modules/google-auto-auth/index.js:27:9)
at getAuthClient (/app/node_modules/google-auto-auth/index.js:233:9)
at <anonymous>
Here I see a problem that the '..' is ignored in front of the path which is why I think that file is not found.
Here is my project structure:
src
--- key
----- keyname.json
----- firebasekeyfilename.json
--- controller
----- listingController.js
----- firebaseController.js
I have tried all different combinations of file names and paths but I cannot get it to find that file.
Does anyone have a clue why this is happening?
In my firebaseController I have the following reference to a similar file in the same folder and it works fine.
var serviceAccount = require("../key/firebasekeyfilename");
The only difference is that the path is inside require() and I guess that requires a different path.
Been stuck with this for a couple of days now, any pointers would be appreciated, thank!
I've created a Rails Engine for assets. I don't use sprockets for css. Instead, I rely on sass's #import. This works perfectly fine in the test/dummy app, but in the Rails app that is requiring the engine, it keeps throwing
Sass::SyntaxError: File to import not found or unreadable: gumby.
I've been at this for a while, and originally the path wasn't in the load path for sass. But then I added
config.sass.load_paths << "#{Gem.loaded_specs['gumby_on_rails'].full_gem_path}/app/assets/stylesheets"
to my config/application.rb and now it definitely shows the correct path to the file I'm trying to import. It is the second to the last path listed in the following trace:
Sass::SyntaxError: File to import not found or unreadable: gumby.
Load paths:
CompassRails::SpriteImporter
CompassRails::SpriteImporter
CompassRails::SpriteImporter
CompassRails::SpriteImporter
CompassRails::SpriteImporter
CompassRails::SpriteImporter
CompassRails::SpriteImporter
CompassRails::SpriteImporter
CompassRails::SpriteImporter
/Users/brandon/code/personal/blog_update/app/assets/images
/Users/brandon/code/personal/blog_update/app/assets/javascripts
/Users/brandon/code/personal/blog_update/app/assets/stylesheets
/Users/brandon/code/personal/blog_update/vendor/assets/javascripts
/Users/brandon/code/personal/blog_update/vendor/assets/stylesheets
/Users/brandon/.rvm/gems/jruby-1.7.11#blog/gems/angularjs-rails-1.0.7/vendor/assets/javascripts
/Users/brandon/.rvm/gems/jruby-1.7.11#blog/gems/turbolinks-2.2.2/lib/assets/javascripts
/Users/brandon/.rvm/gems/jruby-1.7.11#blog/gems/jquery-rails-3.1.0/vendor/assets/javascripts
/Users/brandon/.rvm/gems/jruby-1.7.11#blog/gems/coffee-rails-4.0.1/lib/assets/javascripts
/Users/brandon/code/personal/gumby/app/assets/stylesheets
/Users/brandon/code/personal/blog_update/app/assets/stylesheets
The rails engine's tree looks like this
app/
assets/
stylesheets/
gumby/
...
gumby.css.scss
(I know that technically you should namespace all your assets in an engine, but I didn't want to have gumby/gumby, and I feel the chances of a name clash are slim.)
So in the test/dummy app I can import this file via #import 'gumby';, but this fails in the Rails app. With the above exception. How do I get this working?
And by the way, this is a Rails 4.1 app, and the answers to several other "similar" questions are all due to using groups in the Gemfile. Rails 4 got rid of groups so this is not the problem/solution.
So the solution for me was to suck it up and namespace it gumby/gumby. Then I also had to change the config/application.rb to:
config.assets.paths << "#{Gem.loaded_specs['gumby_on_rails'].full_gem_path}/app/assets/stylesheets"
And for some reason modular-scale wasn't being required properly, even though the engine already required it. So I had to change application.css.scss to application.css.scss.erb and put <% require 'modular-scale' %> at the top.
then you should write it like this :
config.sass.load_paths << "#{Gem.loaded_specs['gumby_on_rails'].full_gem_path}/app/assets/stylesheets/gumby"
or try this (untested)
#import_tree 'gumby';
I have a site running on Heroku using Compass with Saas an is working fine (compiling assets when pushing to Heroku seems to be fine).
I added a new folder inside assets to namespace other styling, like this
/app/assets/stylesheets/site/site1.css
/app/assets/stylesheets/site/site2.css
/app/assets/stylesheets/site/common/base.css.saas
/app/assets/stylesheets/site/site/site1.css.saas
/app/assets/stylesheets/site/site/site2.css.saas
...
The problem is when I visit a page that use site1.css styling I get the following error
Error compiling CSS asset
Sass::SyntaxError: File to import not found or unreadable: ../compass/css3/text-shadow.
Load path: /app
(in /app/app/assets/stylesheets/site/common/base.css.sass)
/app/app/assets/stylesheets/site/common/base.css.sass)
The line that the error refers is this
/app/assets/stylesheets/site/common/base.css.sass
#import "../compass/css3/text-shadow"
I tried both "../compass/css3/text-shadow" and "compass/css3/text-shadow". In both cases I got the same error.
Any idea how to solve this?
Solved.
I needed to specify on production.rb file the additional files to compile
config.assets.precompile +=
Dir["#{Rails.root}/app/assets/stylesheets/site/site/*.*"].collect {|s| "site/" + File.basename(s).gsub(/.scss|.sass/, '') }
Now is working fine.