如何将.scss文件包含到angular2中的组件? [英] How do you include .scss file to a component in angular2?

问题描述

我在scss中为组件完成了样式设计，我想应用该样式.我已经安装了: npm install node-sass sass-loader raw-loader --save-dev

Hi I have a styling done in scss for a component and I want to apply that. I have already installed: 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中:

in my 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样式已正确应用，但CSS无法正常工作.我尝试更改@component中的样式:[require('app/products/product-detail.component.scss').toString()] ，但是它将我的scss文件更改为scss.js文件.

Regular css styling gets applied correctly but scss is not working. I tried changing styles: [require('app/products/product-detail.component.scss').toString()] in @component, but it changes my scss file to scss.js file.

我到处都有Google搜索，但似乎找不到有效的解决方案.有人有主意吗?

I have googled everywhere, but can't seem to find a working solution. Anyone has any idea?

推荐答案

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

You need to use styleUrls and not styles to include your file. Code will look something like below

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

这篇关于如何将.scss文件包含到angular2中的组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！