如何使用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文件？

回答

相关问题