如何使用webpack爲.scss文件添加單獨的CSS文件？

我有一個非常簡單的使用Webpack編譯的JavaScript應用程序。我現在將應用程序拆分爲兩個單獨的包 - App和Vendor。 App包含我的自定義代碼，而vendor文件包含框架。如何使用webpack爲.scss文件添加單獨的CSS文件？

app軟件包包含我的app目錄中的所有JavaScript，但其中也有一些Sass文件。我試圖讓這些編譯成一個單獨的CSS包文件。

通過一些研究，我發現我需要使用帶有webpack Sass編譯器和樣式加載器的extract-text-webpack-plugin。

這裏是我的webpack.config文件：

var webpack = require('webpack') 
var ExtractTextPlugin = require("extract-text-webpack-plugin") 

module.exports = { 
    context: __dirname + '/app', 
    entry: { 
     app: './app.module.js', 
     vendor: ['angular','angular-route'] 
    }, 
    output: { 
     path: __dirname + '/bundle', 
     filename: 'app.bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { test: /\.scss$/, loader: ExtractTextPlugin.extract("style- loader", "css-loader") } 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin(/* chunkName= */'vendor', /* filename= */'vendor.bundle.js'), 
     new ExtractTextPlugin("styles.css") 
    ] 
}

我已經使用NPM安裝了以下的依賴：

"css-loader": "^0.23.1", 
"extract-text-webpack-plugin": "^1.0.1", 
"node-sass": "^3.8.0", 
"sass-loader": "^4.0.0", 
"style-loader": "^0.13.1", 
"webpack": "^1.13.1"

問題是，當我捆綁使用的WebPack，我得到以下錯誤：

Module not found: Error: Cannot resolve 'file' or 'directory' ./../node_modules/css-loader/index.js

and

Module not found: Error: Cannot resolve 'file' or 'directory' ./../node_modules/style-loader/addStyles.js

我現在只在我的主應用程序文件中包含一個sass文件。在我的主app.js文件中，我有：require('./styles.scss')任何想法爲什麼會發生這種情況？

來源

2016-08-11 Tom Nolan

爲了那些你可能有同樣的問題，而你正在運行Windows，下面的解決方案爲我：

在我們webpack.config的頂部添加以下內容：

var path = require('path');

然後改變你在哪裏定義你的上下文到：

context: path.resolve(__dirname, "folder_name")

來源

2016-08-11 22:56:28

如何使用webpack爲.scss文件添加單獨的CSS文件？

回答

相關問題