如何将 .scss 文件包含到 angular2 中的组件中？答案

【问题标题】：How do you include .scss file to a component in angular2?如何将 .scss 文件包含到 angular2 中的组件中？
【发布时间】：2017-03-09 20:41:11
【问题描述】：

您好，我在 scss 中为一个组件完成了样式，我想应用它。我已经安装了：npm install node-sass sass-loader raw-loader --save-dev

在我的组件中，我有：

@Component ({
  selector: 'product-detail',
  templateUrl: 'app/products/product-detail.component.html',
  styles: ['app/products/product-detail.component.scss']
})

在我的 webpack.commons.configs.js 中：

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: [
        './src/main.tsx'
    ],
    output: {
        path: path.join(__dirname, 'app'),
        publicPath: '/',
        filename: 'dist/bundle.js'
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.NoErrorsPlugin(),
    ],
    resolve: {
        extensions: ['', '.tsx', '.ts', '.js']
    },
    module: {
        loaders: [
            { test: /\.tsx$/, loader: 'ts-loader' }
        ]
    },
    loaders: {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}
};

常规 css 样式已正确应用，但 scss 无法正常工作。我尝试在@component 中更改styles: [require('app/products/product-detail.component.scss').toString()]，但它会将我的scss 文件更改为scss.js 文件。

我到处搜索，但似乎找不到有效的解决方案。有人有什么想法吗？

【问题讨论】：

看这里github.com/AngularClass/angular2-webpack-starter/wiki/…
是的，我按照那里的说明进行操作，但仍然没有应用 scss 文件。不过还是谢谢。

标签： angular sass webpack

【解决方案1】：

您需要使用styleUrls 和而不是styles 来包含您的文件。代码如下所示

@Component ({
  selector: 'product-detail',
  templateUrl: 'app/products/product-detail.component.html',
  styleUrls: ['app/products/product-detail.component.scss']
})

【讨论】：