I'm trying to #import an external SASS file to my rails app with no luck.
The folder structure is as follows
- /
- External_dir
- sass
- main.sass <-- file I need
- Rails_App
- app
- assets
- stylesheets
- app.sass <-- file where it should be imported
I've tried using relative paths (../../../../External_dir/sass/main), absolute paths (/External_dir/sass/main) and symlinks but nothing is working. Does anyone have any ideas? I can't continue without these other styles and I don't want to have to copy them over. Thanks in advance.
As cimmanon said in the comments this is a duplicate of SASS: Import a file from a different directory?
The issue had to do with the #imports in the external SASS files using relative paths that the current directory wasn't able to access. By updating the #imports to paths accessible from the current working directory, the SASS was able to import correctly.
Related
I am following this document and trying to grab the tag input functionality in my rails application using webpack.
I added the following line
import 'tagsinput.js'
to import this library in my application.js file but performing a yarn install didn't seem to recognize the library.
I am guessing I am importing it the wrong way or either not initializing it in webpack config. Looking for help on the right way to import and use this library using yarn and webpack.
I was able to get bootstrap4-tagsinput working in my Rails app for webpacker by:
A) Adding bootstrap4-tagsinput module via Yarn
yarn add bootstrap4-tagsinput
B) Importing the bootstrap4-tagsinput into my application.js
import 'bootstrap4-tagsinput/tagsinput.js'
C) Importing stylesheet into my main scss file
#import "~bootstrap4-tagsinput/tagsinput";
Here's what it looks like in my app:
Harumpf. This only shows up with tags if I refresh the form. It seems to run too early.
I'm using Angular5 and webpack for generate the dist folder.
For generating the assets folder i'm using the "copy-webpack-plugin". It copies the assets folder from /src/assets into /dist folder.
The problem is: all the path used by a admin console template of my src code uses relative paths starting from "assets/..." and the server include /dist/assets. All static resources will throw 404 not found.
What is the best way to include an assets folder into a dist folder?
I would recommend using the file-loader designed for this very purpose.
Once you have it configured in your webpack.config.js you can import paths to your files for use in JavaScript, as well as HTML templates if you're also using the html-loader.
const myImageUrl = require('./path/to/an/image.png')
doSomething(myImageUrl)
The newest Rails release 5.1.0.rc1 includes bin/yarn by default. This allows you to install npm modules out of the box. Currently importing javascript files from application.js seems to work fine, but I haven't been able to import css files from the installed modules.
The approach I've tried is using the tilde opperator to let SASS know that it's suppose to be a module:
#import "~owlcarousel-pre/owl-carousel/owl.carousel";
Any ideas on how to get this working?
I was able to get it working by removing the tilde operator.
#import "owlcarousel-pre/owl-carousel/owl.carousel";
Apparently I got mislead by the linting options on my editor that insisted on putting it, but the asset pipeline includes the modules for you so there's no need to use it.
This is the file & folder I am trying to include in my application.scss:
$ ls
jquery.nouislider.css
$ pwd
myapp/vendor/assets/stylesheets/inspinia/plugins/nouslider
I am including it like so:
#import "inspinia/plugins/nouslider/*";
This is the error I get:
Sprockets::FileNotFound - couldn't find file '/app/assets/stylesheets/inspinia/plugins/nouslider'
Checked in these paths:
/app/assets/config
/app/assets/fonts
/app/assets/images
/app/assets/javascripts
/app/assets/stylesheets
/vendor/assets/javascripts
/vendor/assets/stylesheets
How do I properly include this folder without throwing an error?
Edit 1
What's weird is that I have these two files:
$ ls
animate.css patterns plugins style.css
$ pwd
/vendor/assets/stylesheets/inspinia
And I successfully include it like so:
#import "inspinia/style";
#import "inspinia/animate";
So not sure why the above won't work.
Edit 2
I finally got it working, kinda.
What I did was moved the file I wanted to the /inspinia folder and then renamed it from jquery.nouislider.css and rename it to nouislider.css.
Then I just imported it like this:
#import "inspinia/nouislider";
That worked, but I don't know why the normal path and longer file name didn't work.
I've stuck with the same problem and found a better approach to import glob.
#import works fine only with relative paths. So you can use smth like:
#import "../../../vendor/assets/stylesheets/inspinia/**/*";
Ref to glob-imports doc
You should include complete path and try again
Vendor/assets/stylesheets/inspinia/ as it is test or use require or load instead of import
I have installed into a new project in codekit the following components:
jquery
animate.css
normalize
Modernizer
I understand that keeping these components in the bower directory is recommended so these files are easily updated. However, do we link to these in our html files directly? My sass files get compiled and outputted to assets/css but there aren't any sass files in the bower components and creating them in the original folder would, I assume, get overridden if I was to upgrade. Seems very odd to me to upload the entire bower_components file to the production server with all the dependent files. I have been building site for a long time without all this node, git, grunt, bower, et al stuff. I see the value in it, but I'm having a tough time getting up to speed. Any help sure would be appreciated.
In most cases, you would want to include the third-party components (e.g. css, javascript, ... files) within your own master css or javascript file and then minimize that file for production. For example, my folder structure looks like:
bower_components/
...
release/
css/
styles.min.css
img/
...
js/
scripts.min.js
src/
images/
...
scripts/
scripts.js
styles/
styles.less
templates/
...
And then, within styles.less, I might have:
#import (less) "../../bower_components/normalize-css/normalize.css";
Or within scripts.js I could have:
//#codekit-prepend "../../bower_components/jquery/dist/jquery.js"
I have CodeKit set to generate the minified versions in release/ from those files. The only files that go to production are all of the files in the release/ folder.