如何将HMR与SASS和ng2样式加载一起使用？
如何将HMR与SASS和ng2样式加载一起使用？
提问于 2016-09-14 06:45:31
当适当地加载到页面上时，对SCSS文件的更改会导致整个页面重新加载，而不是css的HMR (更改后的样式表的热模块替换)。如何让HMR与Angular2协同工作？
适用的webpack配置(postcss用于自动修复)：
{
test: /\.ts$/,
loaders: ['ts', 'angular2-template-loader']
},
{
test: /\.s?css$/,
loader: 'raw!postcss?sourceMap=inline!sass?sourceMap'
},组件样式实现：
@Component({
selector: 'home-route',
templateUrl: 'home.component.html',
styleUrls: [ './home.component.scss' ],
})回答 1
Stack Overflow用户
发布于 2016-11-08 10:13:44
在这里面临着同样的问题...
我猜使用当前的angular2-template-loader是不可能的，因为这个基于angular2-template-loader的加载器组合只需将styleUrls更改为styles，并将编译后的scss代码内联：
@Component({
selector: 'home-route',
templateUrl: 'home.component.html',
styles: [ '.home{color:red}' ],
})所以它是JS代码的一部分，而不是静态CSS。Ng2将在运行时呈现这些代码。这也意味着ExtractTextPlugin在这方面没有用处...
我现在正在尝试使用css-loader's CSS Module而不是NG2的动态渲染来实现限定范围的CSS。我仍然对TypeScript有一些问题，但它应该可以工作。
home.component.ts：
const klasses = require('./home.component.scss')
@Component({
selector: 'home-route',
templateUrl: 'home.component.html',
})
export class HomeComponent {
klasses = klasses
}home.component.html
<div [ngClass]="klasses.home"></div>国际海事组织，这个解决方案有效，但真的很复杂。但我不能找到更好的解决方案，直到像vue-loader这样的东西出现在Ng2世界……
附注：
我担心的是ts-loader / awesome-typescript-loader是如何工作的。虽然还不能确定，但我猜如果任何css文件被修改，ts文件要求它也将被视为修改，然后重新编译，这最终导致完全刷新…
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39480077
复制相关文章
相似问题
腾讯云开发者
