如何在Webpacker中为Sass加载器添加`includePaths`

Question

我覆盖了sass-loader的配置，以包含node_modules路径：

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')

environment.loaders.prepend('sass', {
    test: /\.(css|scss|sass)$/,
    use: [{
        loader: 'style-loader'
    }, {
        loader: 'css-loader'
    }, {
        loader: 'sass-loader',
        options: {
            includePaths: ['node_modules'],
        }
    }]
})

module.exports = environment

Webpack编译没有错误，但是不再输出application.css包。

我做出了这个改变，因为我从我的Sass文件中导入的NPM插件导致编译时出现错误，这些插件又从其他插件中导入了代码。

- heroxav

---

@DayOne 有什么不同之处？ - heroxav

Answer 1

找到解决方法：

environment.loaders.get('sass').use.find(item => item.loader === 'sass-loader').options.includePaths = ['node_modules']

参考文献: https://github.com/rails/webpacker/blob/3-x-stable/docs/webpack.md

这是有关IT技术的内容，旨在帮助您更好地理解和使用Webpack。请注意保留HTML标记。如果您需要了解更多信息，请查看上面提供的参考文献链接。

- heroxav

---

你是在哪里学会添加加载器的？我正在尝试添加css-loader和style-loader，但我不知道如何让它们起作用。你实际的CSS导入是什么样的？ - Csteele5

@Csteele5 这个 Github 问题提到了这个链接：https://github.com/rails/webpacker/issues/782 ，而且 Webpacker 文档中的这个部分，虽然并不是针对 sass-loader 的，但解释了如何实现：https://github.com/rails/webpacker/blob/master/docs/webpack.md#overriding-loader-options-in-webpack-3-for-css-modules-etc - elliottregan