摘要
我在带有webpacker的rails5应用程序上使用Bulma CSS框架。我收到如下警告,当我将 css 文件构建为 ./bin/webpack-dev-server
时。有谁知道消除它们?
23:37:47 webpacker.1 | WARNING in ./node_modules/css-loader?{"minimize":false}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/import-glob-loader!./app/javascript/stylesheets/application.scss
23:37:47 webpacker.1 | (Emitted value instead of an instance of Error) postcss-custom-properties: /some_rails_app/app/javascript/stylesheets/application.scss:9284:3: Custom property ignored: not scoped to the top-level :root element (.columns.is-variable { ... --columnGap: ... })
版本
- 导轨:5.1.4
- 布尔玛:0.6.1
- 红宝石:2.4.1p111
- 网络打包程序:3.0.2
我在 github 上 https://github.com/MoOx/postcss-cssnext/issues/186 发现了这个问题,这是我如何设置以摆脱警告。
终端
yarn add postcss-cssnext
在config/webpack/loaders/sass中向postcss-loader添加新选项.js
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: (loader) => [
require('postcss-cssnext')({
features: {
customProperties: {
warnings: false
}
}
})
]
}
},
或者,如果您不使用postcss,只需删除postcss加载器即可。
我在 React 和 webpack 配置方面遇到了类似的问题。所以我添加了postcss.config.js
文件并添加了以下代码:
const postcssCssNext = require('postcss-cssnext')
const postcssImport = require('postcss-import')
module.exports = {
plugins: [
postcssCssNext({
features: {
customProperties: {
warnings: false
}
}
}),
postcssImport
]
}