Storybook + Vue.js + Sass + npm7 工作区无法编译

Question

我有一个项目，我正在使用 npm7 分成多个工作区。

我在一个包（另一个工作区）的 vue 组件中使用 sass，并将该包导入我当前的工作区。

当我在故事书运行所在的工作区中使用 sass 时，它可以正常编译。当我在其他工作区中使用 css 时，它可以正常编译。

当我在另一个工作区中使用 sass 时，它找不到加载器。

ModuleParseError: Module parse failed: Unexpected character '@' (39:0)
File was processed with these loaders:
 * ../node_modules/vue-docgen-loader/lib/index.js
 * ../node_modules/vue-docgen-loader/lib/index.js
 * ../node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| 
> @import '../../../bootstrap4/scss/functions';
| @import '../../../bootstrap4/scss/variables';
| 
    at handleParseError (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/webpack/lib/NormalModule.js:469:19)
    at /srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/webpack/lib/NormalModule.js:503:5
    at /srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/webpack/lib/NormalModule.js:358:12
    at /srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.module.exports (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/vue-docgen-loader/lib/index.js:28:5)
    at LOADER_EXECUTION (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
    at runSyncOrAsync (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
    at iterateNormalLoaders (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at iterateNormalLoaders (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.module.exports (/srv/insight_lerna/submodules/insight_core/insight-javascript/node_modules/vue-docgen-loader/lib/index.js:28:5)

我的 main.js 适用于本地 sass。具体如下：

const path = require('path');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  "webpackFinal": async (config, { configType }) => {

    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
}

是否可以将故事书与 npm 工作区一起使用？

我正在使用故事书 6.2.8。

我正在使用 vue.js 2.6.12

Answer 1

经过进一步调查，我发现错误在以下行：

include: path.resolve(__dirname, '../'),

我删除了这一行，它工作正常。很明显，它将规则限制为当前工作区而不是所有工作区。

Storybook + Vue.js + Sass + npm7 工作区无法编译

Storybook + Vue.js + Sass + npm7 workspaces won't compile

sass

vue.js

vuejs2

storybook