我在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-detailponent.html', styles: ['app/products/product-detailponent.scss'] })在我的webpackmons.configs.js中:
in my webpackmons.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-detailponent.scss').toString()] ,但是它将我的scss文件更改为scss.js文件.
Regular css styling gets applied correctly but scss is not working. I tried changing styles: [require('app/products/product-detailponent.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-detailponent.html', styleUrls: ['app/products/product-detailponent.scss'] })更多推荐
如何将.scss文件包含到angular2中的组件?
发布评论