TL;DR
How to import scss files from ember addon to consumers app(should import scss files and not processed css file, scss should be processed in consumer's app instead).
Details:
I am developing an addon and I am using sass for design, I want to let my users configure css properties from addon. For this I want to import scss files directly into the consumers app(I don't want them to use already compiled to css file that would go to vendor.css file) and override some of the variable's value.
Here is the plan on how it should work:
I have a configuration scss file, which has several variables I want to be configurable, user can override these variables by first including their own configuration scss file and our scss file below that(more details on how scss variables can be made overridable and are overriden).
The file structure for addon/styles is as follows:
I have imported all css files inside addon.scss as follows:
#import 'config';
#import 'helpers';
#import 'normalize';
#import 'base';
#import 'utilities';
#import 'modules';
#import 'datetime-picker';
#import 'fontawesome';
#import 'animation';
#import 'states';
The values I want my user to override are in _config.scss. Part of my _config.scss file looks like this:
$header-font: $font-sans !default;
$header-font-size: $small-font-size !default;
$header-font-type: normal !default;
I want user to provide their own value for variables like $header-font,$header-font-size and include before scss from my addon is included.
Ember version: 1.13.3
Related
I'd like to incorporate fontawesome icons on my Foundation Sass project and I am having an issue. I have done everything as suggested by fontawesome team and yet it is not working...
I bower installed the fontawesome
I have added the scss file to the config.yml
I have changed the path name to fonts folder
https://postimg.org/gallery/1h018wsm8/
What I get in my browser is weird symbols and for some reason it is not working. Can you please tell me what I am missing? Thanks...
You have to #import the scss file from the bower_components folder in your Foundation _settings.scss or app.scss file.
The reference you have in config.yml is the PATH to the plugin/module not the import of the actual scss file. What this does is copy the *.scss files to the dist directory, but they still require referencing from your site/app code.
e.g. I use app.scss to import the various scss files and so my #import command for Font Awesome is:
#import '../../../bower_components/font-awesome/scss/font-awesome';
Note: this is to the specific file font-awesome.scss (where you set the font files path), not the whole directory so you also need to make sure you import the font files too which can be done via gulpfile.babel.js + config.yml.
I have to import some stylesheets residing inside node_modules (bootstrap.css from node_modules, etc).
I tried by
adding styleUrls inside #Page,
putting the styles in the .scss file inside the page component folder,
and finally putting the styles inside the template file itself by creating new style tag... all with no luck, i.e the required styles are not getting applied on tags with appropriate classes.
How to do this ?
PN: I had imported the page scss for my components in app.core.scs.
Anyways, I think putting bootstrap.min.css inside page scss is not a
good way
Adding the above import doesn't seem to work in the latest version of Ionic2 (ionic -version = 2.1.4) that I installed on 10/25/16. There is no longer an app.core.scss file in newly created projects. But rather just variables.scss in src/app/theme.
There is a file app.scss in src/app that says it's for global SASS and importing other files, but adding an import for another page does not seem to make a difference.
I have a page /src/app/pages/about, in which I have about.ts that has styleUrls: ['about.scss']. The file about.scss is in the same directory. Putting #import "../pages/about/about"; at the bottom of that file makes no difference.
UPDATE:
I have finally got it to work with this in about.ts:
styleUrls: ['/pages/about/about.scss']
I'm not sure if this is the best way yet, but it works for now.
#import "../pages/yourpage/yourpage"
Add this line in app/themes/app.core.scss and rebuild. Of course change yourpage expression.
Using zurb foundation 6 with bower, what is the normal workflow to customize it using the _settings.scss file, so that the file doesn't stay in the bower_components folder.
This answer says that we could copy the settings file and then import it in our app.scss.
In my custom scss folder, I have made a settings.scss file using the _settings file as template, but in that case I also have to copy the entire utils folder as the settings file imports that.(or change the import path of the utils folder to the one in bower_components).
Is there a better way to do this ??
Edit
I am using gulp to compile the sass files.
gulp.task('sass', () => {
gulp.src('./app/sass/app.scss')
.pipe(sass().on('error', sass.logError))
.pipe(concat('style.css'))
.pipe(gulp.dest('./app'))
})
And this is what app.scss looks like right now (foundation.scss is a file which imports the scss files from inside the bower_components, while settings is a clone of the _settings file with some changes)
#import 'settings';
#import 'foundation';
#include foundation-global-styles;
// #include foundation-grid;
#include foundation-flex-grid;
// #include foundation-typography;
You definitely want to copy the settings file out of the bower_components directory. Then you should add bower_components/foundation-sites/scss to your import paths where you compile the SCSS and that will take care of the utils issue. The import path needs to be in the options object inside of the gulp-sass pipe like so:
gulp.task('sass', () => {
gulp.src('./app/sass/app.scss')
.pipe(sass({
includePaths: ['bower_components/foundation-sites/scss']
}).on('error', sass.logError))
.pipe(concat('style.css'))
.pipe(gulp.dest('./app'))
})
When you use the includePaths option, imports will check for files relative to the current directory, followed by files relative to the directories in the includePaths array. #import util/util works after adding bower_components/foundation-sites/scss to the includePaths because the full path is bower_components/foundation-sites/scss/util/_util.scss.
Easier:
Move the default bower_components/foundation-sites/scss/settings/_settings.scss file into your own project styles.
Edit _settings.scss file to your liking.
Go to bower_components/foundation-sites/scss/foundation.scss file:
Replace:
// Settings
// import your own `settings` here or
// import and modify the default settings through
// #import 'settings';
With:
// Settings
// import your own `settings` here or
// import and modify the default settings through
#import 'your_own/project/styles/path/settings';
Make sure foundation is being imported on your styles:
#import "bower_components/foundation-sites/scss/foundation.scss";
Voilà!
I have an ember app, and a folder with a file playGame/game.js. This file includes game logic, and I want to import it for asset compilation.
If this file is under app/playGame/game.js and my Brocfile is like this:
app.import('app/playGame/game.js')
this gives the error, path or pattern app/playGame/game.js didn't match any files..
but if I put the file under bower_components/playGame/game.js and my Brocfile:
app.import('bower_components/playGame/game.js'), this compiles successfully.
What is the problem and solution here?
There are two parts to this:
Where should I put my file to import it as an asset?
Why isn't putting it in my app-folder working?
The way to do what you want is to create a folder called vendor in your root, put the file somewhere in there, and then import it in your Brocfile.js like so:
app.import('vendor/playGame/game.js');
This is documented on ember-cli.com, although somewhat hidden.
You could also put it in bower_components, but that folder is for things installed with bower, and could theoretically be deleted (in fact, this is a common recommendation to various issues). Things in bower_components is also not checked in to version control by default, which you probably want to do in this case.
This should solve your issue.
Now, why doesn't it work to put it in /app?
app is a special folder. From the documentation:
Contains your Ember application’s code. Javascript files in this
folder are compiled through the ES6 module transpiler and concatenated
into a file called app.js.
This is what makes it possible for you to import stuff from within your app. The folders in app is available directly under your <appname> namespace, along with some other files and folders like config/environment.
Example:
import myWidget from 'my-app/widgets/my-widget';`
The referenced file is /app/widgets/my-widget.js.
The ember-cli website has some more resources for how to use modules. Read those if this doesn't make any sense.
To sum up:
You could put your file in app, but that would make it part of your transpiled package, and you'd have to use it that way internally with an export and everything else that comes with it. It would end up as part of <appname>.js
You could put your file in vendor and import it in your Brocfile.js as explained above. It would be part of vendor.js and load before your app code.
I'm working on a Rails 4 project where I'm using Sass and Sass's #import to combine multiple css into one. It works fine but not if I use a new partial for mixins (_mixins.css.scss) and #import this in main.css.scss only and use mixins any other file which is added after that _webapp.css.scss
#import "bootstrap/bootstrap";
#import "responsive/mega_menu";
#import "responsive/mixins";
#import "responsive/webapp";
Rails Precompilation process is unable to find "responsive/mixins" and gives error in _webapp.css.scss
Sass::SyntaxError: Undefined mixin 'mixin_name'.
here mixin_name is defined in responsive/mixins
If your file is named mixins.css.scss, then you can only import it when it is called as mixins.css, since SASS tries to interpret the #import statement. If there is no extension, SASS expects it to be [filename].scss. You are trying to import [filename].scss while your name is [filename].css.scss. So try:
#import "responsive/mixins.css";
If your stylesheets other than main.css.scss use mixins from your mixin partial then you'll have to import it within those as well. So it looks like you'd need to import mixins in your webapp partial.
This sounds like an asset pipeline issue to me. From the Rails docs:
If you want to use multiple Sass files, you should generally use the Sass #import rule
instead of these Sprockets directives. Using Sprockets directives all Sass files exist within
their own scope, making variables or mixins only available within the document they were defined in.
Are you sure you don't have a sprocket directive somewhere, requiring responsive/webapp (even implicitly in a require_tree)?
The other possibility that comes to mind is that this undefined mixin error may actually be called before it's imported. Are you sure you're not using that mixin somewhere in mega_menu?