我正在使用Angular2 + WebPack + Typescript 1.7技术栈 + SASS + CommonJs。
我已经配置了webpack SASS loader来监视使用"style!css!sass"加载器的scss文件。
在我的组件中,我有@View修饰符,其中包含styles或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文件(用于调试)即可。
P.S. 关于最后一种方法(合并所有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编写)都已经合并成一个名为styles.css的文件,在所有组件中只需要加载一次。
这种方法支持sourceMap,但在调试时需要澄清要修改哪个scss文件。而且,在Angular的@View声明中也没有任何信息。