-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
When using "less" in vue single component file and "px2rem-loader", it will report "undefined missing '}'" error #1706
Comments
建议你使用 postcss-plugin-px2rem,在我这里良好运行 :) |
@u3u 关键是在一些庞大的旧项目,并不是简单的替换就可以解决的,还是需要从根本入手解决 |
undefined missing '}'
错误
The way you are adding the loader, it's added as the first loader to run, but it doesn't understand it has to run after less-loader has run, so it has to be added before it, or even better, before postcss-loader. Output of /* config.module.rule('less').oneOf('vue') */
{
resourceQuery: /\?vue/,
use: [
/* config.module.rule('less').oneOf('vue').use('vue-style-loader') */
{
loader: 'vue-style-loader',
options: {
sourceMap: false,
shadowMode: false
}
},
/* config.module.rule('less').oneOf('vue').use('css-loader') */
{
loader: 'css-loader',
options: {
minimize: false,
sourceMap: false,
importLoaders: 3
}
},
/* config.module.rule('less').oneOf('vue').use('postcss-loader') */
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
/* config.module.rule('less').oneOf('vue').use('less-loader') */
{
loader: 'less-loader',
options: {
sourceMap: false
}
},
/* config.module.rule('less').oneOf('vue').use('px2rem-loader') */
{
loader: 'px2rem-loader',
options: {
remUnit: 75,
remPrecision: 8
}
},
]
}, Solutionconfig.module
.rule(loader)
.oneOf('vue')
.use('px2rem-loader')
.loader('px2rem-loader')
.before('postcss-loader') // this makes it work.
.options({ remUnit: 75, remPrecision: 8 })
.end() Output of /* config.module.rule('less').oneOf('vue') */
{
resourceQuery: /\?vue/,
use: [
/* config.module.rule('less').oneOf('vue').use('vue-style-loader') */
{
loader: 'vue-style-loader',
options: {
sourceMap: false,
shadowMode: false
}
},
/* config.module.rule('less').oneOf('vue').use('css-loader') */
{
loader: 'css-loader',
options: {
minimize: false,
sourceMap: false,
importLoaders: 3
}
},
/* config.module.rule('less').oneOf('vue').use('px2rem-loader') */
{
loader: 'px2rem-loader',
options: {
remUnit: 75,
remPrecision: 8
}
},
/* config.module.rule('less').oneOf('vue').use('postcss-loader') */
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
/* config.module.rule('less').oneOf('vue').use('less-loader') */
{
loader: 'less-loader',
options: {
sourceMap: false
}
}
]
}, |
@LinusBorg perfect |
@LinusBorg It is very good, tks. |
loader is not defined |
Version
3.0.0-rc.3
Reproduction link
https://github.com/smk17/px2rem-vue-demo
Steps to reproduce
在命令窗口执行以下命令:
Execute the following command in the command window:
git clone https://github.com/smk17/px2rem-vue-demo.git cd px2rem-vue-demo yarn yarn serve
What is expected?
正确运行并px已经转成rem
Runs correctly and px has changed to rem
What is actually happening?
实际报错:
Actual error:
分析该错误的发生:
<style src="./App.less"></style>
的方式引用即可。Analyze the occurrence of this error:
<style src="./App.less"></style>
。The text was updated successfully, but these errors were encountered: