时间戳

首页 > 解决方案 > Vue Enterprise Boilerplate：sass-loader 无法从更新的 .scss 文件中加载

vue.js - Vue Enterprise Boilerplate：sass-loader 无法从更新的 .scss 文件中加载

问题描述

我正在使用最新的 vue 企业样板重写现有项目。我还没有找到任何使用 vue 企业样板的示例，所以我正在反复试验。当使用一些带有大块的现有代码时，<style>我遇到了从.scss目录中所有文件导入的编译问题src/design/。这段代码

<style lang="scss" module>
@import '@design';

.container {
  @extend %relative-block;
...

抛出此错误

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: The target selector was not found.
Use "@extend %relative-block !optional" to avoid this error.
   ╷
86 │   @extend %relative-block;
   │   ^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  /home/dean/src/vue/examples/rewrite.0/src/components/nav-bar.vue 86:3  root stylesheet

文件中存在相对块design/_positioning.scss，Intellij 能够找到它

%relative-block {
  position: relative;
  display: block;
}

使用时我也遇到错误sass @mixins：

@include lq-size(100%, 100%);

给

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
   ╷
50 │   @include lq-size(100%, 100%);
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  /home/dean/src/vue/examples/rewrite.0/src/app.vue 50:3  root stylesheet

@mixin lq-size存在并且 Intellij 在以下位置找到它design/_mixins.css：

@mixin lq-size($width, $height) {
  width: $width;
  height: $height;
}

这些错误发生在.scss我添加到src/design/目录的新文件中的代码和现有.scss文件中的新代码上。

我是sass和的新手scss。当我更新.scss将新.scss文件添加到src/design/文件夹中的文件时，我是否必须告诉sass-loader寻找更新的.scss文件？

标签： vue.jssassscss-mixins

解决方案

推荐阅读