Question

我在Rails项目中使用Webpacker，并且希望使用CSS模块来混淆组件中CSS和SASS文件的CSS类。

./config/webpack/development.js如下：

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

/// Use CSS modules and obfuscate CSS class names
const cssRule = environment.loaders.get('css')
const sassRule = environment.loaders.get('sass')
const cssLoader = cssRule.use.find(loader => loader.loader === 'css-loader')
const sassLoader = sassRule.use.find(loader => loader.loader === 'css-loader')

cssLoader.options = Object.assign(cssLoader.options, {
  modules: true,
  localIdentName: '[path][name]__[local]--[hash:base64:5]'
})

sassLoader.options = Object.assign(sassLoader.options, {
    modules: true,
    localIdentName: '[path][name]__[local]--[hash:base64:5]'
  })
///

module.exports = environment.toWebpackConfig()

现在，这仅适用于CSS和SASS，并对其进行模糊处理...但是，当我在CSS内引用诸如图像之类的内容时，会出现错误：

错误 ./node_modules/css-loader??ref--2-2!./node_modules/postcss-loader/lib??ref--2-3!./node_modules/sass-loader/lib/loader.js??ref --2-4！./ app / javascript / components / menu / main.scss 找不到模块：错误：无法解析“ /Users/cameron.drysdale/Projects/webpack_test/app/javascript/components/menu”中的“ background.png” @ ./node_modules/css-loader??ref--2-2!./node_modules/postcss-loader/lib??ref--2-3!./node_modules/sass-loader/lib/loader.js ?? ref--2-4！./ app / javascript / components / menu / main.scss 7：785-805

在main.scss里面，我有

.element {
    background-color: #ffffff;
    background-image: url('background.png');
    background-position: left center;
    background-repeat: no-repeat;
}

如果我关闭CSS模块，则可以正常工作...

是什么原因导致错误？

Answer 1

您需要使用resolve-url-loader来使url正确解析

使用CSS模块时无法在Sass中解析图像

1 个答案: