[原始问题更新]我正在尝试使用webpack设置最新版本的Angular2来处理sass。我现在正在处理scss文件。但问题是css现在问题。
我已将以下内容添加到app.component.ts文件...
require('../../node_modules/bootstrap/dist/css/bootstrap.css');
require('../../public/styles/styles.scss');
我从npm start ...
收到构建错误 ./~/bootstrap/dist/css/bootstrap.css
Module build failed: ReferenceError: window is not defined
bootstrap\dist\css\bootstrap.css doesn't export content
webpack.common.js的相关内容......
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({ loader: [{ loader: "style-loader" }, { loader: "css-loader" } ] })
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({ loader: [{ loader: "css-loader" }, { loader: "sass-loader" } ] })
}
我的package.json中的一个片段......
"devDependencies": {
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"codelyzer": "~2.0.0-beta.1",
"faker": "3.1.0",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"json-server": "0.9.4",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"node-sass": "^4.4.0",
"protractor": "~4.0.13",
"raw-loader": "^0.5.1",
"sass-loader": "5.0.1",
"ts-node": "1.2.1",
"tslint": "4.3.0",
"typescript": "2.1.6",
"webdriver-manager": "11.1.1",
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "^3.0.0-beta.18",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "2.0.0-beta.5",
"html-webpack-plugin": "^2.16.1",
"file-loader": "^0.10.0",
"html-loader": "^0.4.3",
"style-loader": "^0.13.1",
"postcss-loader": "1.2.2",
"webpack": "2.2.1",
"webpack-dev-server": "2.3.0",
"webpack-merge": "^2.6.1"
}
我一直试图解决这个问题。非常感谢任何帮助。
答案 0 :(得分:1)
这里有一个关于scss使用的例子。请注意,我不会将生成的css编译成单独的文件,这一点非常重要。它在我生成的js文件中生成为模块:
{
test: /\.(scss)$/,
loaders: [
'raw-loader',
'sass-loader'
]
}
答案 1 :(得分:0)
所以,我找到了答案。似乎角度文档已经过时,以及webpack文档。
我最终将此作为我的工作配置文件......
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
},
module: {
rules: [
{
test: /\.ts$/,
loaders: [{
loader: 'awesome-typescript-loader',
options: { configFileName: helpers.root('src', 'tsconfig.json') }
},
'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpg|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({ loader: [{ loader: "css-loader" }, { loader: "postcss-loader" } ]})
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({ loader: [{ loader: "css-loader" }, { loader: "sass-loader" } ] })
}
]
},
plugins: [
new ExtractTextPlugin({ filename: 'css/[name].css', disable: false, allChunks: true }),
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
helpers.root('./src'), // location of your src
{} // a map of your routes
),
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
然后我将app语句添加到app.component.ts文件中以获取全局css要求,然后在嵌套组件上使用styles属性进行组件特定样式。