Javascript Scss url在带有storybook的网页包中使用别名_Javascript_Webpack_Storybook

Javascript Scss url在带有storybook的网页包中使用别名

javascript webpack

Javascript Scss url在带有storybook的网页包中使用别名,javascript,webpack,storybook,Javascript,Webpack,Storybook,我正在创建一个组件库（一个npm包，它有一个storybook实例，但主要是一个重新导出的组件库，用于其他几个应用程序）。因此，我有一个故事书配置，但也有一种使用独立网页包配置构建库的方法。这个独立的webpack配置似乎可以正常工作（它构建了…我还没有进一步了解，哈），但问题之一是，当我导入scss样式的字体文件时，我需要关联一个别名，以便它们解析到位于源文件系统根目录下的目录我有以下文件系统设置： aegir/ - src/ - assets/ - fonts/

我正在创建一个组件库（一个npm包，它有一个storybook实例，但主要是一个重新导出的组件库，用于其他几个应用程序）。因此，我有一个故事书配置，但也有一种使用独立网页包配置构建库的方法。这个独立的webpack配置似乎可以正常工作（它构建了…我还没有进一步了解，哈），但问题之一是，当我导入scss样式的字体文件时，我需要关联一个别名，以便它们解析到位于源文件系统根目录下的目录

我有以下文件系统设置：

aegir/
  - src/
  - assets/
    - fonts/
      - fontfiles...
    - styles/ // Shared scss files among different components
      - Typography.scss 
  - components/
    - 01-Atoms/
      - EditableRecipeTitle.js
      - EditableRecipeTitle.scss // Component-specific scss files

我在

storybook/main.js

中定义了一个Webpack配置，如下所示：

const path = require('path');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ],

  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({})
    config.resolve.alias = {
      '@Assets': path.resolve(__dirname, '../src/assets/')
    };

    return config;
  }
}

如您所见，这定义了一个

@Assets

别名，我打算使用它，例如在

排版中。scss

：

@font-face {
  font-family: "Work Sans";
  src: url("@Assets/fonts/WorkSans-Regular.ttf");
}

这似乎适用于库网页包配置，如下所示：

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const nodeExternals = require('webpack-node-externals');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'aegir',
    libraryTarget: 'commonjs2'
  },
  plugins: [new CleanWebpackPlugin()],
  resolve: {
    alias: {
      "@Assets": path.resolve(__dirname, './src/assets')
    }
  },
  module: {
    rules: [
     {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-react-jsx']
          }
        }
      },
      {
        test: /\.(css|scss)$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, './src')
      },
      {
        test: /\.(png|jpe?g|svg|gif|woff|eot|woff2|ttf)$/i,
        use: [ 'url-loader' ]
      }
    ]
  }
}

也就是说，

warn build

生成了一个打包的

dist/index.js

文件，我可以看到一些字体被捆绑在一起（尽管WorkSans-Regular.ttf似乎不在其中……也许这是一个错误的线索？）

当我运行

warn start

（这是我用来启动故事书的命令）时，我得到以下错误：

ERROR in ./src/components/01-Atoms/EditableRecipeTitle.scss (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--9-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-6-4!./src/components/01-Atoms/EditableRecipeTitle.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../../assets/styles/@Assets/fonts/WorkSans-Regular.ttf' in '/home/scottj/Source/aegir/src/components/01-Atoms'
    at doResolve (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/Resolver.js:209:21)
    at hook.callAsync (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at resolver.doResolve (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7)
    at hook.callAsync (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at hook.callAsync (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at resolver.doResolve (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43)
    at hook.callAsync (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn43 (eval at create (/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at hook.callAsync (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at resolver.doResolve (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43)
    at hook.callAsync (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn1 (eval at create (/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
 @ ./src/components/01-Atoms/EditableRecipeTitle.scss 2:26-319 53:4-74:5 56:18-311
 @ ./src/components/01-Atoms/EditableRecipeTitle.js
 @ ./src/stories/01-Atoms/EditableRecipeTitle.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js

错误。/src/components/01 Atoms/EditableRecipeTitle.scss（./node_modules/css loader/dist/cjs.js？？ref--9-oneOf-6-1！/node_modules/postss loader/src？？postss！/node_modules/resolve url loader？？ref--9-oneOf-6-3！/node_modules/sass loader/dist/cjs？？ref----9-oneOf-6-4！/src/components/01 Atoms/EditableRecipeTitle.scss）
模块构建失败（来自./node\u modules/css loader/dist/cjs.js）：
错误：无法在“/home/scottj/Source/aegir/src/components/01”中解析“../../assets/styles/@assets/font/WorkSans Regular.ttf”
在doResolve（/home/scottj/Source/aegir/node_modules/enhanced resolve/lib/Resolver.js:209:21）
在hook.callAsync（/home/scottj/Source/aegir/node_modules/enhanced resolve/lib/Resolver.js:285:5）
at_fn0（在创建时评估（/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10），：15:1）
位于resolver.doResolve（/home/scottj/Source/aegir/node_modules/enhanced resolve/lib/unsafeccheplugin.js:44:7）
在hook.callAsync（/home/scottj/Source/aegir/node_modules/enhanced resolve/lib/Resolver.js:285:5）
at_fn0（在创建时评估（/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10），：15:1）
在hook.callAsync（/home/scottj/Source/aegir/node_modules/enhanced resolve/lib/Resolver.js:285:5）
at_fn0（在创建时评估（/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10），：27:1）
位于resolver.doResolve（/home/scottj/Source/aegir/node_modules/enhanced resolve/lib/DescriptionFilePlugin.js:67:43）
在hook.callAsync（/home/scottj/Source/aegir/node_modules/enhanced resolve/lib/Resolver.js:285:5）
在fn43处（在创建时评估（/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10），：16:1）
在hook.callAsync（/home/scottj/Source/aegir/node_modules/enhanced resolve/lib/Resolver.js:285:5）
at_fn0（在创建时评估（/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10），：27:1）
位于resolver.doResolve（/home/scottj/Source/aegir/node_modules/enhanced resolve/lib/DescriptionFilePlugin.js:67:43）
在hook.callAsync（/home/scottj/Source/aegir/node_modules/enhanced resolve/lib/Resolver.js:285:5）
at_fn1（在创建时评估（/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10），：16:1）
@/src/components/01 Atoms/EditableRecipeTitle.scss 2:26-319 53:4-74:5 56:18-311
@./src/components/01 Atoms/EditableRecipeTitle.js
@./src/stories/01 Atoms/EditableRecipeTitle.stories.js
@/src sync^\.（？：（？：^^^^\/）（？：（？！（？：^^^^^\/）*/）（？！\）（？=）[^\/]*？\.故事（js | jsx | ts | tsx））$
@./.storybook/generated-stories-entry.js
@multi./node_modules/@pmmmwh/react refresh webpack plugin/client/ReactRefreshEntry.js./node_modules/@storybook/core/dist/server/common/polyfills.js/@storybook/core/dist/server/preview/globals.js./.storybook/storybook-init-framework-entry.js./node_modules/@storybook/addon docs/dist/frameworks/common/config.js-generated-other-entry.js./node_modules/@storybook/addon docs/dist/frameworks/dist/preset/addDecorator.js-generated-other-entry.js./node_modules/@storybook/addon-generated-other-entry.js./node_modules/@storybook/addon actions/dist/preset/addDecorator.js-generated-other-entry.js./node_modules/@storybook/addon actions/dist/addArgs.js-generated-other-entry.js./node_modules/@storybook/addon backgrounds/dist/preset/addDecorator.js-generated-other-entry.js./node_modules/@storybook/addon backgrounds/dist/preset/addParameter.js-generated-other-entry.js./.storybook/generated-stories-entry.js./.storybook/generated-stories-entry.js（webpack）-热中间件/client.js？reload=true&quiet=false&noInfo=未定义。/node_模块/react脚本/node_模块/react dev utils/webpackHotDevClient.js

我想知道

解析url加载程序是否会把管道中的事情搞砸。有没有关于我在这里做得不对的想法？
您需要使用resolve url loader
添加缺少的url重写。将其置于加载器链中的sass加载器之前。检查。您需要使用resolve url loader添加缺少的url重写。将其置于加载器链中的sass加载器之前。检查。
ERROR in ./src/components/01-Atoms/EditableRecipeTitle.scss (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--9-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-6-4!./src/components/01-Atoms/EditableRecipeTitle.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../../assets/styles/@Assets/fonts/WorkSans-Regular.ttf' in '/home/scottj/Source/aegir/src/components/01-Atoms'
    at doResolve (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/Resolver.js:209:21)
    at hook.callAsync (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at resolver.doResolve (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7)
    at hook.callAsync (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at hook.callAsync (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at resolver.doResolve (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43)
    at hook.callAsync (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn43 (eval at create (/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at hook.callAsync (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at resolver.doResolve (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43)
    at hook.callAsync (/home/scottj/Source/aegir/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn1 (eval at create (/home/scottj/Source/aegir/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
 @ ./src/components/01-Atoms/EditableRecipeTitle.scss 2:26-319 53:4-74:5 56:18-311
 @ ./src/components/01-Atoms/EditableRecipeTitle.js
 @ ./src/stories/01-Atoms/EditableRecipeTitle.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js