Skip to content

Commit f7ef36b

Browse files
Remove redundant section of docs
1 parent 50be444 commit f7ef36b

File tree

1 file changed

+0
-31
lines changed
  • src/Microsoft.AspNetCore.SpaServices

1 file changed

+0
-31
lines changed

src/Microsoft.AspNetCore.SpaServices/README.md

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -469,37 +469,6 @@ This means that when you `import` or `require` a `.less` file, it should pass it
469469

470470
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.
471471

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,
489-
490-
```javascript
491-
@ng.Component({
492-
selector: ... leave value unchanged ...,
493-
template: ... leave value unchanged ...,
494-
styles: [require('to-string!../../styles/mystyles.less')]
495-
})
496-
export class YourComponent {
497-
... code remains here ...
498-
}
499-
```
500-
501-
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-
503472
#### Approach 3: Building LESS to CSS files on disk
504473

505474
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

Comments
 (0)