我之前已经设置了Vue.js项目,该项目将已定义的.scss文件动态添加到.vue模板文件中,因此我可以访问模板中的变量,mixins等,而无需@导入它们或使它们重复导入代码。
我的问题是我正在使用vue-cli-plugin-nativescript-vue设置NativeScript / Vue.js项目,并且很好奇是否有人成功设置了Webpack以允许相同的功能。据我了解,该插件会在您运行时以最新版本替换webpack,如文档https://cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule中所指定。
下面是我的vue.config.js(编译时没有错误),但似乎没有用。我可能丢失了一些东西,或者不清楚它是如何工作的,感谢您的帮助。
const path = require('path')
module.exports = {
chainWebpack: config => {
const ofs = ['vue-modules', 'vue', 'normal-modules', 'normal']
const cssRules = config.module.rule('css')
const postRules = config.module.rule('postcss')
const addSassResourcesLoader = (rules, type) => {
rules
.oneOf(type)
.use('sass-resoureces-loader')
.loader('sass-resources-loader')
.options({
resources: './src/styles/_global.scss', // your resource file or patterns
})
}
ofs.forEach(type => {
addSassResourcesLoader(cssRules, type)
addSassResourcesLoader(postRules, type)
})
return config
},
}
Vue CLI provides a config扩充CSS加载程序:
// vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `import "~@/styles/_global.scss";`,
}
}
}
}