故事书+;Vue.js+;Sass&x2B;npm7工作区赢得';不编译

故事书+;Vue.js+;Sass&x2B;npm7工作区赢得';不编译,vue.js,sass,vuejs2,storybook,Vue.js,Sass,Vuejs2,Storybook,我有一个项目,我正在使用npm7分为多个工作区 我正在一个包(另一个工作区)中使用vue组件中的sass,并将该包导入到我当前的工作区中 当我在运行storybook的工作区中使用sass时,它编译得很好。 当我在另一个工作区中使用css时,它可以很好地编译 当我在另一个工作区中使用sass时,它找不到加载程序 ModuleParseError: Module parse failed: Unexpected character '@' (39:0) File was processed wit

我有一个项目,我正在使用npm7分为多个工作区

我正在一个包(另一个工作区)中使用vue组件中的sass,并将该包导入到我当前的工作区中

当我在运行storybook的工作区中使用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)

My 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

进行进一步调查,发现错误如下:

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

我去掉了这条线,效果很好。显然,它将规则限制在当前工作区而不是所有工作区。

是否安装了节点sass?是否安装了节点sass 4.13.0。Saas编译工作可以在storybook工作区中找到。问题在于通过npm7引入的其他工作区。因此,我认为我看到的是一个网页包配置类型问题,而不是vue/sass类型的问题。我创建了一个带有“开始故事书--调试网页包”输出的粘贴库:我在这里创建了一个存储库演示该问题: