Question

我有一个非常简单的JavaScript应用程序，我正在使用Webpack进行编译。我现在将应用程序拆分为两个单独的包 - App和Vendor。 App包含我的自定义代码，而vendor文件包含框架。

app包中包含我app目录中的所有JavaScript，但也有一些Sass文件。我正在尝试将这些编译成一个单独的CSS包文件。

通过一些研究，我发现我需要将extract-text-webpack-plugin与webpack Sass编译器和样式加载器一起使用。

这是我的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

和

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

我目前只在主应用程序文件中包含一个sass文件。在我的主app.js文件中，我有：require('./styles.scss')有关为什么会发生这种情况的任何想法？

Answer 1

对于那些可能遇到同样问题并且您正在运行Windows的人，以下解决方案对我有用：

在webpack.config的顶部添加以下内容：

var path = require('path');

然后将您定义上下文的位置更改为：

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

如何使用webpack为.scss文件添加单独的CSS文件？

1 个答案: