Question

我的仓库： https://github.com/leongaban/VueJS-RobotBuilder

我正在关注的课程：https://app.pluralsight.com/player?course=vuejs-fundamentals&author=jim-cooper

这是在我已经设置好之后。不记得是否有一个sass选项。

无论如何目前都会遇到此错误：

“ <”后的CSS无效：预期为1个选择器或规则，为“”

我替换了旧的<style> CSS stuff here </style>

使用：

<style lang="scss">
  @import "_robotBuilder.scss";
</style>

我还安装了以下软件包，但是看不到可以编辑的webpack配置文件。

"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",

Answer 1

解决我的问题。

我删除了此内容

<style lang="scss">
  @import "_robotBuilder.scss";
</style>

一个奇怪的是，import仍然会存在于样式标签中。

然后我清理了.scss文件，然后在<script>部分中使用了此import语句。

import './_robotBuilder.scss';

更新

刚刚了解到您可以确定<style scoped>标签的范围，因此样式仅适用于组件。

Answer 2

我的app.vue（主容器）在样式标签中只有这个

<style lang="scss">
  @import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&subset=latin-ext');
  @import "@/scss/style.scss";
</style>

，效果很好。

这在vue.config.js中

const path = require("path");
module.exports = {

    baseUrl: '/',
    outputDir: undefined,
    assetsDir: 'assets',
    runtimeCompiler: undefined,
    productionSourceMap: undefined,
    parallel: true,
    css: {
        modules: false,
        loaderOptions: {}
    }

}

关闭CSS模块化“可能”与使其与导入配合使用有关。

如何在VueJS项目中设置SASS（vue-cli，无webpack配置）

2 个答案:

更新