Question

您好我在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文件。

我到处搜索，但似乎无法找到有效的解决方案。任何人有任何想法？

Answer 1

您需要使用styleUrls 和而非styles 来包含您的文件。代码看起来像下面的

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

如何将.scss文件包含在angular2中的组件中？

1 个答案: