我正在尝试在我的 VueJS 项目中导入一个 scss 文件,然后它将在其中进行编译,从而能够与我的项目一起使用。但是,我需要一些帮助,因为目前它只是错误。有没有办法做到这一点?请注意,我对 VueJS 很陌生,所以我只是在了解基础知识。
我在 src 文件夹中创建了一个名为 scss 的文件夹,其中包含我的 main.scss 文件。接下来在我的 Vue.JS 中,我有以下代码;
<template>
<div id="app">
<Home></Home>
<Primary></Primary>
<Secondary></Secondary>
</div>
</template>
<script>
import Home from './components/Home.vue'
import Primary from './components/Primary.vue'
import Secondary from './components/Secondary.vue'
export default {
name: 'app',
components: {
'Home': Home,
'Primary': Primary,
'Secondary': Secondary
}
}
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
@import "@/scss/main.scss";
`
}
}
}
};
</script>
<style lang="scss">
#app {
display:block;
}
</style>
Run Code Online (Sandbox Code Playgroud)