在 Angular2 中集成 Sass - webpack答案

【问题标题】：Integrate Sass in Angular2 - webpack在 Angular2 中集成 Sass - webpack
【发布时间】：2017-01-01 23:48:46
【问题描述】：

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

我想将Sass 与我的项目集成。

我知道：

我可以为此使用gulp
可以include SCSS in ng2 components

我更喜欢为.scss 文件创建一个特定目录，一旦它们发生变化，就应该对其进行“监视”和编译，例如.ts 之后的.ts 文件（终端）。

谢谢

【问题讨论】：

标签： angular sass gulp webpack angular-cli

【解决方案1】：

目前（8 月 25 日）这是不可能的，但在 angular-cli 的下一个版本中可以实现。

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

您可以在webinar 中看到我演示此功能（从大约 12 分钟开始）

【讨论】：

新的“@angular/cli”已经发布了，有官方教程吗？
大概是这样的：stackoverflow.com/questions/36220256/…

【解决方案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')
    ]
};

然后您可以使用 styles: [require('path-to-scss')] 在 ng2 组件中包含 scss 文件

【讨论】：