I have installed Bourbon with Bower, but cannot get broccoli-sass to import Bourbon. Broccoli-sass is compiling my app.scss file to app.css.
I have tried
#import '_bourbon';
and
#import 'bourbon';
at the top of my app.scss file but get the error:
Error: file to import not found or unreadable: _bourbon
My brocfile:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var compileSass = require('broccoli-sass');
var app = new EmberApp();
var sassImportPaths = [
'app/styles',
'bower_components/bourbon/app/assets/stylesheets',
];
var appCss = compileSass(sassImportPaths, 'app.scss', '/assets/app.css');
module.exports = app.toTree([appCss]);
No need to import it in your Brocfile. You can simply add Bourbon as a dependency in your app.scss:
#import "bower_components/bourbon/app/assets/stylesheets/bourbon.scss";
If you look at this file you will see that it contains all the necessary imports.
Related
I am attempting to add the cypress-angular-unit-test plugin to Cypress.
However, following the instructions provided on the related GitHub page I am getting the following error:
The plugins file is missing or invalid.
/MyProjectName/cypress/plugins/index.js:1
import * as cypressTypeScriptPreprocessor from 'cy-ts-preprocessor';
^^^^^^
SyntaxError: Cannot use import statement outside a module
Again, as instructed, I have added the following to support/index.js
// core-js 3.*
require('core-js/es/reflect');
// core-js 2.*
require('core-js/es7/reflect');
require('cypress-angular-unit-test/support');
And the following to plugins/index.js
import * as cypressTypeScriptPreprocessor from 'cy-ts-preprocessor';
module.exports = (on, config) => {
on('file:preprocessor', cypressTypeScriptPreprocessor);
require('#cypress/code-coverage/task')(on, config);
return config;
};
I've also added the related helper.js and cy-ts-preprocessor.js file to the plugins folder.
I've also added the necessary config to cypress.json
"experimentalComponentTesting": true,
I've even tried adding types/node by adding a tsconfig.json to the cypress folder like so:
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress", "node"],
"experimentalDecorators": true
},
"include": [
"**/*.ts"
]
}
Changing the target and/or lib values to es6 has no effect.
Changing the import to a require yields a different error which, even if it did work, seems like a hacky solution for some detail I am missing.
¯\_(ツ)_/¯
Not exactly an answer but at least a work around.
Start fresh or uninstall Cypress and cypress-angular-unit-test
Follow the instructions for Nx Cypress install found on here
Go back to cypress-angular-unit-test instructions and ignore this part:
Configure cypress/plugins/index.js to transpile Angular code.
import * as cypressTypeScriptPreprocessor from './cy-ts-preprocessor';
module.exports = (on, config) => {
on('file:preprocessor', cypressTypeScriptPreprocessor);
return config;
};
The file cy-ts-preprocessor is here
I installed browser-image-compression which, as part of its functionality, creates a Worker. Now when I run jest tests, I get the following error:
Test suite failed to run
ReferenceError: Worker is not defined
There are no tests connected to the function which uses browser-image-compression.
The scripts section in package.json has the following two lines
"test": "react-scripts test",
"test:ci": "cross-env CI=true react-scripts test"
Oh, and I have a file for setting up tests. Should I mock Worker in here?
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import '#domain/yup';
configure({
adapter: new Adapter()
});
global.fetch = require('jest-fetch-mock');
Late in responding to this but it could help others - but following this comment helped me with this issue.
If you add the following to its own file - I have mine within the same dir as the setupTests file named workerMock.js:
export default class Worker {
constructor(stringUrl) {
this.url = stringUrl;
this.onmessage = () => {};
}
postMessage(msg) {
this.onmessage(msg);
}
}
Then import that Worker file into your test setup file and add window.Worker = Worker. Your setup file may look like:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import '#domain/yup';
import Worker from 'path-to-your-worker-file-above';
configure({
adapter: new Adapter()
});
global.fetch = require('jest-fetch-mock');
window.Worker = Worker;
Hope this helps
A better solution is that updating 'browser-image-compression' package to the latest version , this helped me .
I have a flask application that I would like to convert into an executable for deploying elsewhere. I have used py2exe for that. I am getting jinja2:TemplateNotFound error. I have copied the static and templates folders into the dist folder where the exe files reside. Pls let me know if I am missing something. My setup file is as follows:
from distutils.core import setup
import py2exe
import os
from glob import glob
import sys
from distutils.filelist import findall
import matplotlib
matplotlibdatadir = matplotlib.get_data_path()
matplotli bdata = findall(matplotlibdatadir)
matplotlibdata_files = []
for f in matplotlibdata:
dirname = os.path.join('matplotlibdata', f[len(matplotlibdatadir)+1:])
matplotlibdata_files.append((os.path.split(dirname)[0], [f]))
data_files=[('static', glob("D:\\pythonLearning\\static\\*.*")), ('templates', glob("D:\\pythonLearning\\templates\\login.html"))]
data_files.extend(matplotlibdata_files)
print data_files
sys.path.append('C:\\Windows\\winsxs\\x86_microsoft.vc90.crt_1fc8b3b9a1e18e3b_9.0.30729.6161_none_50934f2ebcb7eb57')
setup( console=['myfile.py'],
options={ 'py2exe': { 'packages' : ['matplotlib', 'pytz','werkzeug','email','jinja2.ext'],
'includes': ['flask','jinja2'] } },
data_files=data_files )
This is because jinja expects your egg to be unzipped and available via the filepath. See for more information.
You can workaround this for typical data files using this
but jinja2 has no direct support for this and you would have to implement this yourself
I am a newbie to ember. Running ember server command gives me "frontend/app.js: undefined is not a function" error. I have ran npm install and bower install.
version: 0.2.1
Could not find watchman, falling back to NodeWatcher for file system events.
Visit http://www.ember-cli.com/#watchman for more info.
Livereload server on port 35729
Serving on http://localhost:4200/
File: frontend/app.js
frontend/app.js: undefined is not a function
TypeError: frontend/app.js: undefined is not a function
at Object.isValidIdentifier (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/types/validators.js:176:44)
at TraversalPath.Property (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/transformation/transformers/es3/property-literals.js:16:58)
at TraversalPath.call (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/traversal/path.js:127:26)
at TraversalPath.visit (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/traversal/path.js:142:10)
at TraversalContext.visitNode (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/traversal/context.js:34:22)
at TraversalContext.visit (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/traversal/context.js:51:28)
at Function.traverse.node (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/traversal/index.js:44:17)
at TraversalPath.visit (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/traversal/path.js:159:18)
at TraversalContext.visitNode (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/traversal/context.js:34:22)
at TraversalContext.visit (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/traversal/context.js:51:28)
app.js
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import config from './config/environment';
Ember.MODEL_FACTORY_INJECTIONS = true;
var App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver: Resolver
});
loadInitializers(App, config.modulePrefix);
export default App;
I am using ember-cli-sass instead of broccoli-ruby-sass
These are the steps i have done
npm install --save-dev ember-cli-sass
bower install --save foundation
I am getting this error in the console after i started the ember server
I don't understand why it says "File not found: /app/styles/app.scss"
i don't have any app.scss a part from
I am missing something in the configuration, what's the problem exactly?
I am using three sass file
_global.sass
_music.sass
_player.sass
i import them in app.sass
#import global
#import player
#import music
i was reading the https://www.npmjs.com/package/ember-cli-sass and it says
Specify some include paths in config/environment.js:
ENV.sassOptions = {
includePaths: [
'bower_components/foundation/scss'
]
}
I am bit confused about these settings, i need some advices
I think you are getting the error because you may not have changed the name of your app.css file to app.scss
You your app/styles folder you should have a file called app.scss in that file I would put your imports
// app.scss
#import 'foundation';
#import 'global';
#import 'player';
#import 'music';
Then you need to add:
ENV.sassOptions = {
includePaths: [
'bower_components/foundation/scss'
]
}
To your config/environment.js like this:
module.exports = function(environment) {
var ENV = {
modulePrefix: 'test-sass',
environment: environment,
baseURL: '/',
locationType: 'auto',
sassOptions: {
includePaths: [
'bower_components/foundation/scss'
]
},
EmberENV: {
FEATURES: {
.....
If you are looking to use foundation in your ember-cli app use the ember-cli addon: https://www.npmjs.com/package/ember-cli-foundation-sass
I think ember-cli-sass by default looks for sass files with extension .scss. If you are using file extension of .sass, you need to specify it in sassOptions.
ENV.sassOptions = {
includePaths: [
'bower_components/foundation/scss'
],
extension: 'sass'
}
Check https://github.com/aexmachina/ember-cli-sass