Блог

Я пытаюсь загрузить глобальный файл scss в книгу рассказов, но как только я изменил импорт с .css на .scss , я получил ошибки, которые варьировались от @ не распознания в @import tailwind до ERROR in ./styles/globals.scss . Это ошибка, на которой я застрял в настоящее время.

Вот мой main.js файл внутри .storybook

 //.storybook/main.js module.exports = {  stories: [  '../stories/**/*.stories.mdx',  '../components/**/*.stories.mdx',  '../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)',  ],  addons: [  '@storybook/addon-links',  '@storybook/addon-essentials',  '@storybook/preset-scss',  {  name: '@storybook/addon-postcss',  options: {  postcssLoaderOptions: {  implementation: require('postcss'),  },  },  },  ],  webpackFinal: async (config) =gt; {  config.module.rules.push({  test: /.scss$/,  use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],  })   return config  },  framework: '@storybook/react', }   

 //.storybook/preview.js import '../styles/globals.scss'  export const parameters = {  actions: {argTypesRegex: '^on[A-Z].*'},  controls: {  matchers: {  color: /(background|color)$/i,  date: /Date$/,  },  }, }  

И ошибка, которую я получаю, когда запускаю сборник рассказов:

 ERROR in ./styles/globals.scss Module build failed (from ./node_modules/style-loader/dist/cjs.js): TypeError: this.getOptions is not a function  

Я смог запустить storybook find с обычным global.css файлом, но когда я добавил scss, я получил ошибки.

Вот список моих зависимостей, если это поможет:

 "dependencies": {  "next": "12.0.7",  "path": "^0.12.7",  "react": "17.0.2",  "react-dom": "17.0.2",  "sass": "^1.45.0"  },  "devDependencies": {  "@babel/core": "^7.16.0",  "@storybook/addon-actions": "^6.4.9",  "@storybook/addon-essentials": "^6.4.9",  "@storybook/addon-links": "^6.4.9",  "@storybook/addon-postcss": "^2.0.0",  "@storybook/preset-scss": "^1.0.3",  "@storybook/react": "^6.4.9",  "autoprefixer": "^10.4.0",  "babel-loader": "^8.2.3",  "css-loader": "^6.5.1",  "cypress": "^9.1.1",  "eslint": "7",  "eslint-config-next": "12.0.7",  "eslint-plugin-storybook": "^0.5.3",  "postcss": "^8.4.4",  "postcss-loader": "^6.2.1",  "sass-loader": "^12.4.0",  "style-loader": "^3.3.1",  "tailwindcss": "^3.0.0"  }