I'm trying to import in an ember project that uses ember-cli-sass a scss file from a node_package which imports another scss file from another node package using ~;
basically the file I'm importing contains the following instruction:
#import "~bootstrap/scss/functions"; // from bootstrap node_module
but that breaks the build since it seems that ember-cli is not resolving the ~;
I've configured ember-cli-build with
sassOptions: {
includePaths: [
'node_modules/<package_name>/scss',
]
},
Related
I have to import this library and have the "ZeroEx" variable global across all ember files.
i tried to add this line in ember-cli-build.js but I got no such file or directory
app.import('node_modules/0x.js');
https://0xproject.com/docs/0x.js#installation
There is a new ember add-on that should make this easy for you: ember-auto-import https://github.com/ef4/ember-auto-import
I have set up a basic project and only .scss files are picked up. I would like to write my CSS with the .sass format. How can I turn that on?
You can override the app script config files:
https://github.com/driftyco/ionic-app-scripts#overriding-config-files
In my package.json, I added the following:
"config": {
"ionic_sass": "./config/sass.config.js"
}
I created the sass.config.js (copy from the github project) and added the sass extension:
includeFiles: [
/\.(scss|sass)$/i
],
It's unfortunately impossible to update the watch config file, so I directly edited it in the node module:
Under #ionic/app-scripts/config/watch.config.js
Add the following .sass line below .scss:
'{{SRC}}/**/*.scss',
'{{SRC}}/**/*.sass'
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à!
Ember 2.0 / ember-cli 1.13.8
I couldn't find a way to import names export from ES6 module located in ./vendor dir in my Ember 2.0 project.
simple
import {Socket} from 'vendor/phoenix' in my Controller does not transpile the lib into ES5
app.import('vendor/phoenix.js', {exports: {phoenix: ['Socket']}}) in my ember-cli-build.js does not transpile the lib into ES5 either.
I have also tried
https://stackoverflow.com/a/29659509/255633 --
could not make it work due to named exports. (Error: Entry module can only have named exports in strict mode (pass ``strict: true``)
When I just modify the library to use default export the error went away but the library was not available for import. Looks like Broccoli didn't merge the lib into the tree.
here is my ember-cli-build.js :
var tree = './vendor';
var amdFiles = new ES6Modules(tree, {
format: 'amd',
bundleOptions: {
entry: 'phoenix.js',
name: 'phoenix'
}
});
return mergeTrees([app.toTree(), amdFiles]);
When you import an ES6 file into an ember app you need to have ember run the file through the transpiler so to do this you can simply do the import in your controller. The issue is that ember needs to have the file in the app folder in order to be able to import it.
So place the JavaScript file inside the app folder under say:
app/phoenixjs
then in your controller:
import phoenix from 'PROJECTNAME/phoenixjs/phoenix
then you can use the phoenix object anywhere in that file.
working Proof:
EDIT
being able to use a named import by
import {Socket} from 'import-test-app/extends/phoenix';
import Ember from 'ember';
export default Ember.Controller.extend({
test:Socket.name
});
in the template test is "Socket"
I'd like to use Cytoscape.js in my Ember project. So I installed the dependency: npm install --save cytoscape. Next I created my Ember component. When I write the component js file, I cannot find out, how to import Cytoscape. I tried import cytoscape from "cytoscape", var cytoscape = require("cytoscape") however none of these works.
So how to properly "include" cytoscape to my component?
Problem solved. Cytoscape needs to be installed via bower and mentioned in ember-cli-build.js file like this: app.import(app.bowerDirectory + '/cytoscape/dist/cytoscape.min.js');. Also information about cytoscape needs to be added to .jshintrc file:
"predef": [
"document",
"cytoscape",
"window",
"-Promise"
],