我有一个简单的应用程序,使用angular2和webpack 2,使用sass作为模板和angular2模板加载程序,这样我就可以使用templateUrl
和styleUrls
而不是在组件中使用require
。
现在我想有一个单独的css文件,我可以直接链接到我的网页。这将使用sass,包括bootstrap和bootswatch。我希望它是分开的,这样我的页面可以在角度引导之前显示相同风格的东西。这是我的装载机:
{ test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },
{ test: /\.html$/, loader: 'raw' }, // for templates, need 'raw'
{ test: /\.css$/, loader: 'raw', exclude: /node_modules/ }, // for templates, need 'raw'
{ test: /\.scss$/, loaders: ['raw', "sass"] }, // for templates, need 'raw'
我需要的'原始'的模板加载正确使用Angular2模板加载器。我想我可以使用一个单独的“sass”扩展名来分离我想分离的文件并使用“extract text webpack plugin”,但是我无法使用它:
var extractSASS = new ExtractTextWebpackPlugin('[name].css');
// in loaders:
{ test: /\.sass$/, loader: extractSASS.extract(['style', 'css', 'sass']) }
// in plugins:
extractSASS
我也试过'extract' loader。最接近成功的方法是添加条目“./src/main.sass”,并将其用于加载程序:
{ test: /\.sass$/, loaders: [
{
loader: 'file',
query: {
name: '[name].css'
}
},
'extract',
'raw',
'css',
'sass'
]
}
但是生成JavaScript文件(注释省略):
exports = module.exports = require("./../node_modules/css-loader/lib/css-base.js")();
exports.push([module.id, "h1 {\n background-color: #333; }\n", ""]);
好的,更新我把它从上面的列表中删除“原始”加载器(我想),并要求在JavaScript中这样的SASS文件:
var x = require('./main.sass');
这样做对吗?我怎么能使用
scss
作为扩展,而不让它弄乱我的角模板,只使用'raw'和'sass'作为加载程序? 最佳答案
看来Extract Text Plugin是你需要的。
关于angular - 单个单独的CSS文件带有angular 2和webpack 2?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38939239/