mocha 및 styles-resources-loader가 있는 Vue.js는 종속성 sass를 로드할 수 없습니다.

mocha 및 styles-resources-loader가 있는 Vue.js는 종속성 sass를 로드할 수 없습니다.

mochapack이 스타일리소스 로더와 연동되지 않는 문제가 있습니다.

문제의 원인이라고 생각되는 패키지:

• "@vue/cli-cli-block-unit-mocha": "~4.2.0",
• "vue-cli-module-style-module-module" : "~0.1.4"

나의vue.config.js파일:

const path = require("path");

module.exports = {
  ...

  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: [path.resolve(__dirname, "./src/assets/styles/*.scss")]
    }
  }
};

위의 설정에 포함되는 단일 sass 파일:

@import "~vue-select/src/scss/vue-select.scss";

로딩되는 것 같습니다.vue-select.scss그러나 이 파일을 해석할 때 현재 디렉토리가 손실되고 가져온 스타일을 찾을 수 없습니다.

오류 로그 발췌:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "global/variables";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  /node_modules/vue-select/src/scss/vue-select.scss 1:9  @import
  /src/components/HelloWorld.vue 1:9 

자세한 에러 메시지와 코드는, https://github.com/petritz/food-calculator-web/runs/560575367 를 참조해 주세요.

유닛 테스트에 모카를 사용하고 있습니다.같은 문제가 발생한 후, 저는 제 옷을 갈아입어야 한다는 것을 깨달았습니다.vue.config.js송신원:

module.exports = {
  publicPath: "/",
  css: {
    sourceMap: true,
    loaderOptions: {
      sass: {
        prependData: `@import "@/scss/main.scss";`
      }
    }
  }
};

대상:

module.exports = {
  publicPath: "/",
  css: {
    sourceMap: true,
    loaderOptions: {
      scss: {
        additionalData: `@import "@/scss/main.scss";`
      }
    }
  },
  chainWebpack: config => {
    if (
      process.env.NODE_ENV === "test" ||
      process.env.NODE_ENV === "production"
    ) {
      const scssRule = config.module.rule("scss");
      scssRule.uses.clear();
      scssRule.use("null-loader").loader("null-loader");
    }
  }
};

편집: 로컬 개발 및 운영에서 문제가 있을 수 있으므로 몇 가지 사항을 변경해야 했습니다.

• 를 업그레이드했습니다.sass-loader10.1.0 이상으로
• 를 인스톨 할 필요가 있었습니다.null-loaderCSS 프리프로세서모듈에 대한 대응
• 나는 사용해야만chainWebpack에서vue.config.js사용하다null-loader내 안에서test그리고.production환경

이 Vue CLI GitHub repo 오픈호에서 답을 찾았습니다.https://github.com/vuejs/vue-cli/issues/4053#issuecomment-544641072

언급URL : https://stackoverflow.com/questions/61031121/vue-js-with-mocha-and-styles-resources-loader-cant-load-dependency-sass