带有 mocha 和 styles-resources-loader 的 Vue.js 无法加载依赖项 sass

Question

我遇到的问题是 mochapack 似乎无法与样式资源加载器一起使用。

\n\n

似乎产生问题的软件包：

\n\n

\n
• "@vue/cli-plugin-unit-mocha": "~4.2.0",
\n
• “vue-cli-plugin-style-resources-loader”：“~0.1.4”
\n

\n\n

我的vue.config.js文件：

\n\n

const path = require("path");\n\nmodule.exports = {\n  ...\n\n  pluginOptions: {\n    "style-resources-loader": {\n      preProcessor: "scss",\n      patterns: [path.resolve(__dirname, "./src/assets/styles/*.scss")]\n    }\n  }\n};\n

\n\n

通过上述配置包含的单个 sass 文件：

\n\n

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

\n\n

它似乎正确加载，vue-select.scss但在解释该文件时，它似乎丢失了当前目录并且找不到导入的样式。

\n\n

错误日志摘录：

\n\n

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can\'t find stylesheet to import.\n  \xe2\x95\xb7\n1 \xe2\x94\x82 @import "global/variables";\n  \xe2\x94\x82         ^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n  /node_modules/vue-select/src/scss/vue-select.scss 1:9  @import\n  /src/components/HelloWorld.vue 1:9 \n

\n\n

查看完整详细的错误消息和代码：\n https://github.com/petritz/food-calculator-web/runs/560575367

\n

Answer 1

我正在使用 Mocha 进行单元测试。遇到同样的问题后，我注意到我必须更改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-loader我至少升级到10.1.0
• 我必须安装null-loader才能使用 CSS 预处理器模块
• 我必须chainWebpack在我的环境中vue.config.js使用null-loadertestproduction

我在 Vue CLI GitHub 存储库上的这个开放问题中找到了答案：https://github.com/vuejs/vue-cli/issues/4053#issuecomment-544641072