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'
Related
I am trying to copy a single file from the src location to the "www" output folder. I then want to incorporate this into the build process so that after all the core build scripts are run, it runs my command.
I am following the examples in the App Build Scripts for Ionic. Basically I have:
Added a new config file with my command (as per this example): config\webpack_rj.config.js
module.exports = {
copyIndexContent: {
src: ['{{SRC}}/web.config'],
dest: '{{WWW}}'
}
}
In my package.json I have added:
"config": {
"pwa_copy_webconfig": "./config/webpack_rj.config.js"
},
This is the part I do not understand - how to actually run it when I run the normal build process.
I have tried added an additional "scripts" entry in the package.json:
"build": "ionic-app-scripts build ./config/webpack_rj.config.js",
However this did not work. So how can I invoke copyIndexContent or pwa_copy_webconfig from the build process?
You are trying to add a new step to the build process instead of extending copy. This is not possible unless you make custom changes to the app scripts module to take the pwa_copy_webconfig command from the config.
A common way is to extend the existing config file.
You can extend the copy.config.js in your webpack_rj.config.js file.
const copyConfig = require('path_to_default_copy_config');
copyConfig.copyIndexContent.src.push('{{SRC}}/web.config');
In package.json add:
"config": {
"ionic_copy": "./config/webpack_rj.config.js"
},
Credit to Raj's answer here for a different app script configuration.
I'm using webpack resolve.extensions to "selectively" bundle my js files.
eg.
App.js
import MyComp from 'comp/myComp';
in comp/ folder I have:
MyComp.web.js
MyComp.ios.js
MyComp.android.js
Now I want to write test for App.js, to test how it render as web. But the problem is Jest keep resolving all 3 .js files and that causes dependency error because I'm not running the command in a mobile environment and most mobile modules will not work.
how can I tell jest to only resolve .js and .web.js files just like webpack?
I added this to my package.json and it keep resolving .ios.js and .android.js
"moduleFileExtensions": ["web.js", "js", "jsx"],
"moduleDirectories": [
"node_modules",
"main"]
I tried as suggested with:
"testPathIgnorePatterns": ["<rootDir>/node_modules/", "^.+\\.(android|ios)\\.js$"],
looks no effects :(
You can also remap files to an empty file
touch empty.js
In your jest config add following
moduleNameMapper: {
'\\.(css|jpg|png|scss|less|sass)$': '<rootDir>/empty.js',
},
Works perfect for me
You can add testPathIgnorePatterns to your package.json file. The value is an array of regex patterns. Any file/path that matches an expression will be ignored/skipped from testing.
See these Jest docs for more detail
I have the following structure:
app/
pods/
components/
user-login/
component.js
style.scss
template.hbs
Template files and component files livereload correctly, however, when I save changes to my style files in Atom the changes are not applied on the webpage- they are only applied when I kill and rerun:
ember server
and reload the webpage. I have installed the following:
ember-cli-styles-reloader
and I have tried adding:
"liveReload": true,
"watcher": "polling"
to:
.ember-cli
and I also tried adding these options to:
ember-cli-build.js
inside the app variable.
What am I missing?
There is a better option I believe, and I recommend to do this way:
First install ember-cli-sass-pods addon that uses ember-cli-sass (will install automatically) and then generate your style scss files into your pods directories.
to install
ember install ember-cli-sass-pods
then add
var app = new EmberApp(defaults, {
// you must add Watched folder to your Ember-Cli-Build.js
sassOptions: {
includePaths: ['app']
}
});
For example:
app/components/user-login
app/components/user-login/component.js
app/components/user-login/template.hbs
app/components/user-login/style.scss
just simply run this command:
ember g style [path] -p //your path now is components/user-login
there are more options that you can read their documents
You are ,after installing and setting up that, able to use ember-cli-styles-reloader which probably will work smoothly. make sure you have followed all the rules that they mentioned in their documents to set up ember-cli-styles-reloader.
I currently have the following project structure:
project/
tsconfig.json
webpack.config.js
package.json
node_modules/
...lots of dependencies
typings/
...lots of .d.ts files for the dependencies
src/
...folders for files for my projects
My tsonfig.json looks like:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"outDir": "./js",
"rootDir": "./src",
"sourceMap": true,
"jsx": "react"
},
"exclude": [
"typings/main.d.ts",
"typings/main",
"node_modules"
]
}
This all works very well and I can happily develop my application and run it in a browser.
I would now like to add some unit tests to my project and coming from a Java background my initial instinct is to place the tests in a separate folder:
project/
test/
...all of my test cases
Of course, the files in the test/ folder need to reference the code in my src/ folder. How do I set that up?
Or is it "better" to place the tests inline in the src/ folder and have a separate webpack.config.js file for them?
Really confused about how this works in practice in larger TypeScript projects.
Note: I have seen this but found the answer less than illuminating. It seems that the referenced feature discussion about filesGlob would help me, but I just wonder how people are doing this today?
Now other than rootDir, you can use rootDirs
"rootDirs": ["./scripts", "./src"],
for multiple folders.
Here is the API doc: https://www.typescriptlang.org/docs/handbook/module-resolution.html#virtual-directories-with-rootdirs
I think you are looking for path mapping. With the paths compiler option, you can specify not only a mapping to a single location but to several. This is the example from the documentation:
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"*",
"generated/*"
]
}
}
If the compiler does not find a module in the expected location, it repeats module resolution in the "generated" subfolder. The baseUrl setting seems redundant but it is mandatory.
Or is it "better" to place the tests inline in the src/ folder and have a separate webpack.config.js file for them?
That is what I do. Do not use the TypeScript compiler as a module bundler (Especially if you are not using modules https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md). Just let it do the compile and bundle for browser using webpack and use as it is (if using module commonjs) for backend (nodejs).
I created a basic project to try and get Gruntjs, Karma and Jasmine to play together. When I setup the karma.conf.js file with all of the neccesary files, everything works and the tests pass.
When I try to split them up in Grunt though, I get problems.
Gruntfile.js
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
karma: {
options: {
configFile: 'karma.conf.js'
},
basicController: {
files: ['/basicController/scBasicControllerCtrl.js', '/basicController/test/ControllersSpec.js']
},
overworkedController: {
src: ['overworkedController/scOverworkedControllerCtrl.js', 'overworkedController/test/ControllersSpec.js']
}
}
});
The documentation at grunt-karma show to use "files:" when splitting up the modules. I did that under the basicController module and when I try to run $ grunt karma:basicController --verbose, I get an error saying
Warning: Cannot use 'in' operator to search for 'src' in /basicController/scBasicControllerCtrl.js Use --force to continue
Aborted due to warnings.
When I run $ grunt karma:overworkedControllers --verbose (using "src" instead of "files", it looks like everything is going to work and the Chrome browser launches but then is says it executed 0 of 0 ERROR.
There should be 3 tests.
Let me know if there's any more info I could post.
My understanding of grunt-karma was incorrect.
I thought I could have the base and source files in the karma.conf.js file. Then in each module, I'd just add the specific files needed for that module and test.
The way it actually works is that the files declared in each module completely overwrite the files property in the karma.conf.js file. Not append to them.
I ended up creating an array in Gruntfile.js that contains all of the source .js files and just concat the necessary files to it in each module.