[英]SCSS alias in Vue SFC via Rollup
When using Webpack is pretty straight forward to add an alias for scss files in a Vue SFC, eg: 使用Webpack时,可以很直接地在Vue SFC中为scss文件添加别名,例如:
<style lang="scss">
@import "~scss/config/config";
...
</style>
Would be the following in Webpack: 在Webpack中将是以下内容:
alias: {
sass: path.resolve(__dirname, '../scss/')
}
How would you add the same kind of alias in Rollup via rollup-plugin-vue
? 您如何通过
rollup-plugin-vue
在Rollup中添加相同种类的别名?
I've tried adding a number of postcss plugins, eg 我尝试添加一些postcss插件,例如
import importer from 'postcss-import';
vue({
css: false,
style: {
postcssPlugins: [
importer({
path: null,
addModulesDirectories: [path.resolve(__dirname, '../shared')]
})
]
}
}),
I've also tried: rollup-plugin-alias
, rollup-plugin-includepaths
and some other postcss plugins. 我也尝试过:
rollup-plugin-alias
, rollup-plugin-includepaths
和其他一些postcss插件。
I don't think you can use postcss
plugins within the Vue plugin to accomplish this, because it compiles the scss
before it gets passed to postcss
. 我认为您不能在Vue插件中使用
postcss
插件来完成此操作,因为它会在将scss
传递给postcss
之前对其进行postcss
。 Using rollup-vue-plugin
I've been able to use style.preprocessOptions.scss.includePaths
to alias directories, in my case pointing to node_modules
: 使用
rollup-vue-plugin
我已经可以使用style.preprocessOptions.scss.includePaths
到别名目录,在我的情况下,它指向node_modules
:
//rollup.config.js
import VuePlugin from 'rollup-plugin-vue'
...
plugins: [
VuePlugin({
style: {
preprocessOptions: {
scss: {
includePaths: ['node_modules'],
}
}
})
]
...
// some .vue file
<style>
@import 'some-node-module' //resolves to 'node_modules/some-node-module'
</style
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.