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

Posted 2023-02-19

【中文标题】Storybook + Vue.js + Sass + npm7 工作区无法编译

【英文标题】：Storybook + Vue.js + Sass + npm7 workspaces won't compile

【发布时间】：2021-07-10 18:09:51

【问题描述】：

我有一个项目，我正在使用 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;
  ,

是否可以将 storybook 与 npm 工作区一起使用？

我正在使用故事书 6.2.8。

我正在使用 vue.js 2.6.12

【问题讨论】：

你安装了node-sass吗？？

node-sass 4.13.0 已安装。 Saas 编译作品可在故事书工作区中找到。问题出在通过 npm7 引入的其他工作区中。因此，我相信我看到的是 webpack 配置类型问题，而不是 vue/sass 类型问题。

我用“start-storybook --debug-webpack”的输出创建了一个pastebin：pastebin.com/QbGgDgm7

我在这里创建了一个用于演示问题的存储库：github.com/kevingill1966/storybook-problem

【参考方案1】：

经过进一步调查，我发现错误在于：

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

我删除了这条线，它工作正常。显然，它将规则限制在当前工作区而不是所有工作区。