I wanted to include prebuilt theme for angular app. I included below line in app.component.css.
#import "../../node_modules/#angular/material/prebuilt-themes/indigo-pink.css";
I was surprised it didn't apply the theme to my app. Then from docs I inferred I should include, now it works but I am curious why?
#import "#angular/material/prebuilt-themes/indigo-pink.css";
Inside common stylesheet, style.css not app.component.css! and the path (../../node_modules/#angular/material/prebuilt-themes/indigo-pink.css) makes more sense than "~#angular/material/prebuilt-themes/indigo-pink.css"
I have following questions,
1.What does it needs import only in style.css an why not inside appcomponent.css?
2.Though the path ~#angular/material/prebuilt-themes/indigo-pink.cs leads to nothing, how is the angular-material could pick the theme?
3.What does '~' mean in the above path?
To give more info, I have included project structure
All the imports here are referenced relatively. It can be a hassle to remember how many folders to jump into and out of.
If you move your files around, you'll have to update all your import paths.
Let's look at how we can reference imports absolutely so that TypeScript always looks at the root /src folder when finding items.
Our goal for this will be to reference things like so:
import { HeaderComponent } from '#app/components/header/header.component';
import { FooterComponent } from '#app/components/footer/footer.component';
import { GifService } from '#app/core/services/gif.service';
This is similar to how Angular imports are referenced using #angular like #angular/core or #angular/router.
Setting Up Absolute Paths
Since TypeScript is what is in charge of transpiling our Angular apps, we'll make sure to configure our paths in tsconfig.json.
In the tsconfig.json, we'll do two things by using two of the compiler options:
baseUrl: Set the base folder as /src
paths: Tell TypeScript to look for #app in the /src/app folder
baseUrl will be the base directory that is used to resolve non-relative module names. paths is an array of mapping entries for module names to locations relative to the baseUrl.
Here's the original tsconfig.json that comes with a new Angular CLI install. We'll add our two lines to compilerOptions.
{
"compileOnSave": false,
"compilerOptions": {
...
"baseUrl": "src",
"paths": {
"#app/*": ["app/*"]
}
}
}
With that in our tsconfig.json, we can now reference items absolutely!
import { HeaderComponent } from '#app/components/header/header.component';
import { FooterComponent } from '#app/components/footer/footer.component';
import { GifService } from '#app/core/services/gif.service';
This is great because we can now move our files around and not have to worry about updating paths everywhere.
based on this:
/ - Site root
~/ - Root directory of the application
this can be useful too;
Related
I have a React project with webpack (own configuration), from which I need to generate different packages with different styles. It would always be the same application, only in each package it generates, it would need a particular css file to end up in the package.
For example, in the repository I would have different css files:
- src
- index.js
- index.html
- themes
- theme1
theme1.css
- theme2
theme2.css
- theme3
theme3.css
and when I build it should look like this: (in "build" folder)
- build
index.html
main.css // with the styles of theme2, for example
bundle.js
I don't know how to do this with webpack or which plugin, hope you help me.
Thanks
You can get multiple separate CSS by adding multiple entries in your configuration.
Example:
webpack.config.js
module.exports = {
entry: {
main: "./path/to/your_main.js",
"css-theme-1": "./path/to/your/theme.css",
"css-theme-2": "./path/to/your/another-theme.css",
}
}
Also, you can build it into a folder by configuring filename properties in mini-css-extract-plugin.
Further reading:
Webpack Code Splitting
I have an GastbyJS application, and I'm trying to add typescript on it. I solve most of the issues, but I'm not able to make the css module work with it.
I have this import in my file, that works fine:
import styles from "./card.module.css"
But when I added the typescript config it says that Cannot find module './card.module.css'.ts(2307)
I tried to use some gatsby plugins, but they didn`t work as expected.
The whole code is here: github
I had the same problem and after trying all the various plugins I came across this solution which worked for me.
Create a css.d.ts file with:
declare module '*.css' {
const content: { [className: string]: string };
export default content;
}
Add these lines to your tsconfig.json file:
"esModuleInterop": true,
"files": ["./src/typings/css.d.ts"]
The "files" path needs to match where your type definition file is.
https://github.com/thetrevorharmon/gatsby-starter-typescript-sass/issues/1#issuecomment-436748732
In my Webpack configuration I'm defining one resource root for common files like this:
{
loader: 'sass-loader',
options: {
includePaths: [
'node_modules',
'src/components/_common'
]
}
}
Now I'm having e.g. a file _fonts.scss in the resource root and can import it using #import "fonts";. This is working like a charm.
However, if this file contains a #font-face directive that is written relative to src/components/_common (path like in the Webpack configuration above) the file loading of that font url won't work. Webpack isn't able to resolve this URL as it assumes that it's written based on the path of the actual file which imports _fonts.scss, which is not src/components/_common.
So, my question is: Would it be possible that I write the path absolute from the beginning of the project, so that Webpack can always resolve it as it's no longer relative? I've tried it with no luck. Also I've tried specifying resolve.modules and resolve.alias with no luck too.
To solve this issue, it's only necessary to use the resolve-url-loader:
https://github.com/bholloway/resolve-url-loader
Keep in mind that it's currently necessary to have sourceMap enabled on any previous loader. It's just that easy.
I am trying to set up the conjunction of Atom editor, Sass, Typescript and Aurelia. This question is about Aurelia (installed via aurelia-cli) and its building system, I guess.
Well, I wrote style.sass for my component, then I required it in the component's view (app.html, for instance) as style.css. Fine, it works. But the content of compiled style.css gets included in index.html as internal styles, I mean everything goes inside <style>-tag, not through <link>. Also it seems that the corresponding .css file is never created at all. The stream just includes its content right in <style>-tag inside index.html.
How could I make Aurelia include my styles as external styles via <link>? In building task the last action is a build-plugin coming from aurelia-cli which is kinda black-box for me. Also aurelia.json is imported, so there should be a way to configure the needed behavior. A quick search didn't give me the answer, so here I am.
This is probably not the best solution, and not completely what you want, but perhaps it helps. You can do the following (I took a new TypeScript project):
First remove the css includes from your views.
Then, adjust the ./aurelia_project/tasks/process-css.ts task as follows:
import * as gulp from 'gulp';
import * as sourcemaps from 'gulp-sourcemaps';
import * as sass from 'gulp-sass';
import * as project from '../aurelia.json';
import {build} from 'aurelia-cli';
export default function processCSS() {
return gulp.src(project.cssProcessor.source)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(project.platform.output));
};
This will output CSS files in the ./scripts folder. Then, adjust the aurelia_project/aurelia.json file as follows (remove css):
{
"name": "app-bundle.js",
"source": [
"[**/*.js]",
"**/*.{html}"
]
},
In your index.html you can now include the generated styles (or even in your components views).
I've installed a new library with npm, so far so good. Now I want to import the css in there to my project, obviously I shouldn't link directly to the node_modules folder. So, is there a simple to do import this to my project? I'm using Angular CLI.
I have an idea, but I'm not sure if it's a good idea - I thought about installing gulp/grunt and then require the style there and output it as vendor.css into my project. Is it even possible?
First go to your angular-cli-build.js file and add an entry in the vendorNPMFiles array. This will copy your node_modules files to the /vendor directory during the build. Now you can reference your css in your index.html as /vendor/folder/file.css.
Eg: angular-cli-build.js
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'#angular/**/*.+(js|js.map)',
'bootstrap/dist/**/*.*',
'lodash/lodash.min.js'
]
});
};
index.html snippet
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">