You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/Microsoft.AspNetCore.SpaServices/README.md
-31Lines changed: 0 additions & 31 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -469,37 +469,6 @@ This means that when you `import` or `require` a `.less` file, it should pass it
469
469
470
470
That's all you need to do! Restart your site and you should see the LESS styles being applied. This technique is compatible with both source maps and Hot Module Replacement (HMR), so you can edit your `.less` files at will and see the changes appearing live in the browser.
471
471
472
-
**Scoping styles in Angular 2 components**
473
-
474
-
If you're using Angular 2, you can define styles on a per-component basis rather than just globally for your whole app. Angular then takes care of ensuring that only the intended styles are applied to each component, even if the selector names would otherwise clash. To extend the above technique to per-component styling, first install the `to-string-loader` NPM module:
475
-
476
-
```
477
-
npm install --save to-string-loader
478
-
```
479
-
480
-
Then in your `webpack.config.js`, simplify the `loader` entry for LESS files so that it just outputs `css` (without preparing it for use in a `style` tag):
481
-
482
-
```javascript
483
-
{ test:/\.less/, loader:'css!less' }
484
-
```
485
-
486
-
Now **you must remove any direct global references to the `.less` file**, since you'll no longer be loading it globally. So if you previously loaded `mystyles.less` using an `import` or `require` statement in `boot-client.ts` or similar, remove that line.
487
-
488
-
Finally, load the LESS file scoped to a particular Angular 2 component by declaring a `styles` value for that component. For example,
Now when you reload your page, you should file that the styles in `mystyles.less` are applied, but only to the component where you attached it. It's reasonable to use this technique in production because, even though the styles now depend on JavaScript to be applied, they are only used on elements that are injected via JavaScript anyway.
502
-
503
472
#### Approach 3: Building LESS to CSS files on disk
504
473
505
474
This technique takes a little more work to set up than technique 2, and lacks compatibility with HMR. But it's much better for production use if your styles are applied to the whole page (not just elements constructed via JavaScript), because it loads the CSS independently of JavaScript.
0 commit comments