问题：
1.示例
<style lang="scss" scoped></style>
结果：
- 示例
<style lang="scss">
//
@import 'src/assets/styles/base.scss';
</style>
结果：
配置如下：
css: {
preprocessorOptions: {
scss: {
// 引入scss全局变量文件
additionalData: @use "@/assets/styles/base.scss" as *;
}
},
postcss: './postcss.config.cjs'
},
`
postcss.config.cjs文件：
module.exports = {
plugins: [
require('postcss-mobile-forever')({
appSelector: '#app',
viewportWidth: 375,
maxDisplayWidth: 600,
rootContainingBlockSelectorList: ['van-tabbar', 'van-popup'],
exclude: [/node_modules/]
}),
require('autoprefixer')({
overrideBrowserslist: ['> 1%', 'last 2 versions', 'not dead']
})
]
}
base.scss
*,
*::before,
*::after {
box-sizing: border-box;
}
#app {
height: 100vh;
}
不清楚是什么原因，如果直接使用less在main.ts引入less样式文件则可以正常使用
问题：
1.示例
<style lang="scss" scoped></style>结果：
- 示例
<style lang="scss"> //@import 'src/assets/styles/base.scss'; </style>结果：
配置如下：
css: {
preprocessorOptions: {
scss: {
// 引入scss全局变量文件
additionalData:
@use "@/assets/styles/base.scss" as *;}
},
postcss: './postcss.config.cjs'
},
`
postcss.config.cjs文件：
module.exports = {
plugins: [
require('postcss-mobile-forever')({
appSelector: '#app',
viewportWidth: 375,
maxDisplayWidth: 600,
rootContainingBlockSelectorList: ['van-tabbar', 'van-popup'],
exclude: [/node_modules/]
}),
require('autoprefixer')({
overrideBrowserslist: ['> 1%', 'last 2 versions', 'not dead']
})
]
}
base.scss
*,
*::before,
*::after {
box-sizing: border-box;
}
#app {
height: 100vh;
}
不清楚是什么原因，如果直接使用less在main.ts引入less样式文件则可以正常使用