在 Angular2 中集成 Sass - webpack

Question

我使用 angular CLI(@1.0-webpack.2).

创建了一个新的 angular2 项目

我想将 Sass 集成到我的项目中。

我知道：

我可以用 gulp 这个
可以include SCSS in ng2 components

我更喜欢的是为 .scss 文件设置一个特定的目录，该目录应该是 'watched' 并在它们更改后编译，例如 ng serve（终端）之后的 .ts 文件。

谢谢

Answer 1

您应该将 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 文件

Answer 2

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

在 angular-cli.json 文件中会有一个属性 names styles 这将是样式文件的路径数组，引用时将包含样式文件在您的申请中。

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

在 Angular2 中集成 Sass - webpack

Integrate Sass in Angular2 - webpack

angular

sass

gulp

webpack

angular-cli