在Angular2中集成Sass - webpack

Question

我使用angular CLI（@ 1.0-webpack.2）创建了一个新的angular2项目。

我想将Sass与我的项目整合。

我知道：

• 我可以将gulp用于此
• 可以include SCSS in ng2 components

我应该考虑拥有.scss个文件的特定目录，这些目录应该被观看＆＃39;并在编辑后进行编译，例如.ts（终端）之后的ng serve个文件。

谢谢

Answer 1

此时（8月25日）这是不可能的，但是下一版本的angular-cli将有可能。

在angular-cli.json文件中，将有一个属性名称styles，它将是一个样式文件路径数组，在引用时将包含在您的应用程序中。

您可以在此webinar（从12分钟左右开始）

中看到我演示此功能

Answer 2

您应该将index.html移至dist。如果要将scss构建合并到webpack构建中，请将以下内容添加到webpack配置中：

{
    output: {
        filename: './dist/[name].js'
    },

    module: {
        loaders: [
            {
                test: /\.css$/,
                exclude: './app',
                loader: ExtractTextPlugin.extract('style', 'css')
            },
            {
                test: /\.scss$/,
                loaders: ['exports-loader?module.exports.toString()', 'css', 'sass']
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin('./styles.css')
    ]
};

然后，您可以在scss

的ng2组件中加入styles: [require('path-to-scss')]个文件