sass – 如何将TypeScript WebPack ts-loader与Angular2 @View样
|
我正在使用Angular2 WebPack Typescript 1.7堆栈SASS CommonJs.
我有webpack SASS加载器配置为使用“style！css！sass”加载器来监视scss文件. 在我的组件中,我有@View装饰器,它包含样式或styleUrls参数,可用于传递此组件的内联样式或样式URL. 如果我将指定其中一个@View参数,Angular2会自动加载指定的css文件或(或将内联css),这对我有用. 但是如果我将使用sass-loader require(),它将使我能够将scss编译为css并将其内置到我的js文件中(我使用ts-loader并将所有脚本合并到app.js中). 所以我可以使用stylesUrl通过Angular2自动预加载css文件. @View({ stylesUrl: 'my.css'}) export class Component{}
或者我可以使用require(‘*.scss’)将css合并到我的app.js中 require('styles/my.scss');
@View({}) export class Component{}
对此更好的方法是什么,我的意思是Angular2方式？ 此外,我可以从所有scss文件预构建一些common.css,并且只是避免为组件指定任何样式.而且index.html中只包含1个common.css common.css.map文件(用于调试) 附：关于最后一种方法(合并所有css文件) //webpack.config.js
loaders: [
{
test: /.scss$/,loader: ExtractTextPlugin.extract('style',['css?sourceMap','sass?sourceMap']),include: path.join(__dirname,'src','styles'),}
...
plugins: [
new ExtractTextPlugin("assets/path/styles.css?[hash]-[chunkhash]-[contenthash]-[name]",{
disable: false,allChunks: true
})
//index.html
<link rel="stylesheet" href="assets/path/styles.css" />
所以现在我有CDN供应商链接到css.所有我的自定义css(用scss编写)都合并到1个文件styles.css中,它们为所有组件加载一次. 此方法启用了sourceMap.但澄清在调试中修改哪个scss文件有点棘手..而且Angular @View声明中也没有任何信息 解决方法
好吧,我不太明白这些问题,但我会尽力回答我的理解.
所以对我来说,我认为你指定的两种方式都不是最好的方法.我用的是： @Component({
selector: 'message',template: '<p class = {{class}}> whatever html </p>',styles: [ require('./style.scss')],})
export class Comp{}
因此,通过包含样式表,我获得了两件事： >使用sass并将其直接输入到我的代码中 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |