如何將.scss文件包含在angular2中的組件中？

您好我有一個組件在scss中完成的樣式，我想應用它。我已經安裝：npm install node-sass sass-loader raw-loader --save-dev如何將.scss文件包含在angular2中的組件中？

，並在我的組件，我有：

@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文件。

我已經到處搜索，但似乎無法找到工作解決方案。任何人有任何想法？

來源

2017-03-09 Kimmiekim

採取這裏https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components –

是啊，一看，我也跟着來自那裏的指令和scss文件仍然沒有得到應用。謝謝您的好意。 – Kimmiekim

您需要使用styleUrls和不styles，包括您的文件。代碼看起來像下面

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

來源

2017-03-09 23:52:46 S4beR

如何將.scss文件包含在angular2中的組件中？

回答

相關問題