webpack，angular 2，css和sass的設置問題

[從原始發行版更新]我正在嘗試安裝帶有webpack的Angular2的最新版本來處理sass。我現在正在處理scss文件。但是，現在的問題在於CSS。webpack，angular 2，css和sass的設置問題

我已經添加了以下到app.component.ts文件...

require('../../node_modules/bootstrap/dist/css/bootstrap.css'); 
require('../../public/styles/styles.scss');

我正在從故宮開始生成錯誤...

./~/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"

}

我一直在試圖解決這個好幾天。任何幫助深表感謝。

來源

2017-02-10 Lee Matthews

我刪除了我的答案，嘗試根據插件示例更改您的配置。 https://github.com/jtangelder/sass-loader –

查看插件示例，我將我的webpack配置更改爲：{ test：/\.scss$/， loader：ExtractTextPlugin.extract（{loader：[{ 裝載機：「CSS-裝載機」 }，{ 裝載機：「青菜裝載機」 }]， fallbackLoader：「風格裝載機」 }） }現在我得到這個錯誤「預期 '風格' 是一個字符串數組「我有一個組件，這個styleUrls：['./invoice-list.component.scss']，如果我註釋掉錯誤消失 –

嗨，李，安裝'raw-loader'，並使用它之前'CSS-loader'。這應該將'預期'風格'的問題理清爲字符串數組' – Ruaghain

所以，我找到了答案。看起來角度文檔已經過時了，還有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' 
    }) 
    ] 
};

然後我說需要聲明爲全局CSS要求app.component.ts文件，然後使用的樣式屬性上用於組件特定樣式的嵌套組件。

來源

2017-02-13 19:57:07

下面是一個適用於我的關於scss使用的示例。請注意，我不會將生成的CSS編譯到單獨的文件中，這一點很重要。它在我生成的js文件中作爲模塊生成：

{ 
    test: /\.(scss)$/, 
    loaders: [ 
     'raw-loader', 
     'sass-loader' 
    ] 
    }

來源

2017-02-10 16:34:52 Ruaghain

webpack，angular 2，css和sass的設置問題

回答

相關問題