1

我的项目结构如下：

在此处输入图像描述

我有以下 webpack 配置文件：

module.exports = {
    context: __dirname + "/resources",
    entry: "./js/entry.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            }
        ]
    }
};

并打开我的 entry.js 文件

require('./style.scss');

我知道这种特定的安排可能不起作用，但我已经尝试了一个多小时的不同排列、设置和配置，但似乎无法让 webpack 找到我的 .scss 文件。

有人可以告诉我在我的情况下应该如何设置 webpack 配置文件吗？

干杯。

编辑，

试图在我的要求中上升两个级别，

require('../../scss/style.scss')

仍然给我，

在此处输入图像描述

同样对于

require('../scss/style.scss');

在此处输入图像描述

4

2 回答 2

2

问题出在require语句中

require('./style.scss');

它将resources/js参考您的文件在目录中搜索您的样式文件，entry.js尝试使用以下方法要求您的样式：

require('../scss/style.scss');

尝试使用path模块来解析上下文路径：

var path = require('path');
...
context: path.resolve("resources"),
...

让我知道问题是否已解决。

于 2016-09-04T03:40:04.850 回答
0

好吧，我觉得自己像个彻头彻尾的白痴，在多次重命名文件和文件夹并尝试了我的 require 语句的不同排列之后，我注意到错误似乎一直在声明

Can't resolve 'style' in ...

原来我没有将 style-loader 和 css-loader 安装到我的项目中，尽管它们与 sass-loader 捆绑在一起。（实际上已在 npm 页面上注明），正在运行

npm install css-loader style-loader -D

在我的项目目录中解决了这个问题。

不过，感谢您的建议，我希望这可能对将来的某人有所帮助。

于 2016-09-04T17:57:11.667 回答