I'm building a meteor app with meteor-angular2 package. But with .css it's quite unfunny so far.. As soon is try to import a css file in a component, meteor is "modules-loader" is telling that this is not a module i'm trying to import (true basically :D)
Now i'm fiddling around with a basic webpack+ng2 setup and i can get it easily running with direct imports of .css files in typescript - just because i can configure the webpack loaders correctly (you can even get css-modules in this way with ng2!)
So, in the docs of the latest meteor angular2 package release it is somwhere written that it is basically packing all the stuff with webpack.
What's the right way to modify this underlaying webpack config? Is it even possible? Do i have to fork the package repo to change it? At a first shot i didn't find the webpack stuff in there..
Related
Using Aurelia CLI with the built-in bundler and SystemJS ...
I have two SCSS files. One is for the loading indicator/page as Aurelia is bootstrapped and should be excluded from the bundle and available in my /dist folder as plain CSS (not bundled at all). I've accomplished the first part (excluding it from app-bundle), but how can I configure au build / aurelia.json to still process loading.scss and put the resulting CSS in /dist.
Edit: I can/will just update the appropriate gulp task myself, but was not sure if there was a better way.
I ended up altering the Gulp tasks to do what I needed to do. I verified on Aurelia's Gitter that this is the correct approach.
I am learning my way through Meteorjs and I want to write the styles of my code using sass, I added fourseven:scss plugin to my meteor app with meteor add fourseven:scss and documentation says
Without any additional configuration after installation, this package automatically finds all .scss and .sass files in your project, compiles them with node-sass, and includes the resulting CSS in the application bundle that Meteor sends to the client.
So I created some .scss files in /client/styles/ and I was expecting for the plugin to detect those files and generate a css file that meteor would bundle in the browser, but it doesn't work that way I guess, that means the file will be generated when I build my app? Is there a way to get the compiled files immediately after a change, just like npm compiler packages? thank you.
You can edit a scss.json file in your root folder to show straight where css and scss files should lay.
{
"enableAutoprefixer": true,
"includePaths": [
"path/to/some/sass/folder",
"path/to/another/sass/folder"
]
}
If you starting meteor server he already watch for changes in CSS files and refreshing browser on change without reloading page via Browserify.
Thank for providing the code Adnan Y
I have to import npm modules in my existing project of Meteor. I am using some modules on each page and in meteor I am forces to import npm module on each page.Is there any common page where I import modules once and use it in my application throughout?
The reason you must import modules (regardless if they are npm packages, atmosphere packages, or other files in your project) in every JavaScript file in Meteor is because you have the ecmascript package installed.
This wonderful package allows you to take advantage of all the great new ECMAScript 2015 (or ES6) features (eg. arrow functions, classes, constants, block scoping​, etc.). One such feature (and the one that you are talking about) that it also includes is modules.
In ES6, modules are a built-in construct where units of reusable code are scoped at the file level such that there is exactly one module per file and one file per module. This means that in order to use any piece of code defined outside of a file you must first import it. This is very similar to import in Java and #include in C++, but subtly different. You can learn more about ES6 modules here.
Long story short, there are tons of advantages to the new spec, however if you wish to revert back to the global nature of pre-ES6, you can simply remove the ecmascript package from your meteor project, follow the original folder structure​ guidelines, and you will no longer have to import modules in every file..
Hi i just finished installing asp.net core1 so got introduced to npm , bower and nodejs after researching a lot i chose to go with angular2 .
now my problem is that i have never used gulp, grunt etc even though i know how it works and why to use it. there are lots of instructions on web to setup angular2 project with mvc6 but not explaining the thing which is new with mvc6.
anyways i dont want to get myself confused with gulp/grunt etc right now so i am just copying files from node_modules to my script folder and giving it path but it works almost for everything related to angular.
for eg.
import {anything} from 'angular2/core' or from RXjs etc(this import is from node_modules) and i have to give a path in my index files where i have copied all the files.
but when i try to include some plugins like ng2-select, ng2-bootstrap or toastr etc it doesnt work the way it should it throws errors.
my question is do i need to copy whole folder from node_modules to my script folder and then linq it or what , how it works?
Do I need to copy whole folder from node_modules to my script folder and then link it or what, how does this work?
I have an example in my blog post of what you should be doing in this situation. Ideally, you will use a gulpfile.js to orchestrate your desired file needs. For example, if you're looking for Angular2 it is rather simple. You create a gulpfile.js by adding a new item to your project. In that file you write some simple "tasks" that automate this move for you. You look in node_modules and move over anything that you need. For Angular2 I move over the following .js files (in this example):
var angularJs = [
'./node_modules/angular2/bundles/angular2.js',
'./node_modules/angular2/bundles/router.js',
'./node_modules/angular2/bundles/angular2-polyfills.js',
'./node_modules/angular2/bundles/http.js'
];
So to answer your question more directly, no. You do not need to copy the entire folder -- just the files that your application needs.
Can css/sass/stylus files be directly imported into Elm files in some way? The webpack css-loader module makes this possible in Javascript with an import './styles.css', but I can't find anything on how one might do it in Elm with or without Webpack.
I had the same question when I started looking into styles and I ended up making a POC of how that might look like by using Elm port and subscriptions to tell Webpack to fetch CSS modules.
Check it out: https://github.com/geekyme/elm-css-modules
I don't think this can be done directly, but you can create a bridging entry point for Webpack that will import everything, including CSS and Elm together, for bundling.
Check this out: http://www.elm-tutorial.org/050_starting/webpack.html#indexjs