我有一个非常奇怪的问题。在使用 Vue CLI 新鲜生成的 vue.js 项目中,我的 scss 文件无法正常工作。我正在使用 vue.config.js 中配置的 scss,如下所示:
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
@import "@/scss/all.scss";
`
}
}
}
};
Run Code Online (Sandbox Code Playgroud)
我的 scss 文件夹中有多个文件,直到我在单个文件组件中使用作用域关键字(例如我的 nav.txt)之前,这些文件都没有问题。然后由于某种原因我的全局样式被忽略:
<template>
<div class="nav">
<ul class="nav__menu">
<li class="nav__item">
<span>item</span>
</li>
<li class="nav__item">
<span>item</span>
</li>
<li class="nav__item">
<span>item</span>
</li>
<li class="nav__item">
<span>item</span>
</li>
</ul>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.nav {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,00c2a9+100 …Run Code Online (Sandbox Code Playgroud)