Использование Storybook / vue с SCSS - PullRequest
Новая
       11

Использование Storybook / vue с SCSS

0 голосов
/ 16 марта 2020

Я создал проект, используя vue create, а затем установил Storybook. Он работает нормально, за исключением того, что когда я добавляю s css к компоненту, я получаю следующую ошибку: 

Module parse failed: Unexpected token (14:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| 
> .test {
|   background: red !important;
| }

Вот как выглядит мой компонент: 

<template>
    <h1 class="test">Hello</h1>
</template>

<script>
export default {
  name: "Test",
    props: {
        msg: String
    },
}
</script>
<style lang="scss" scoped>
  .test {
    background: red !important;
  }
</style>

Если я удаляю в теге <style> ошибка будет go.

Я следовал документации здесь для добавления поддержки sass к .storybook/main.js, но когда я изменил свою конфигурацию следующим образом: 

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

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

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

Я получаю новую ошибку: 

Daniels-MBP-2-597b:scss-loader-example dcaine$ npm run storybook

> scss-loader-example@0.1.0 storybook /Users/dcaine/Documents/webdev/test/scss-loader-example
> start-storybook -p 6006

info @storybook/vue v5.3.17
info
info => Loading presets
info => Loading presets
info => Adding stories defined in ".storybook/main.js".
info => Using default Webpack setup.
ERR! ReferenceError: path is not defined
ERR!     at Object.webpackFinal (/Users/dcaine/Documents/webdev/test/scss-loader-example/.storybook/main.js:13:16)
ERR!     at accumulationPromise.then.newConfig (/Users/dcaine/Documents/webdev/test/scss-loader-example/node_modules/@storybook/core/dist/server/presets.js:261:72)
ERR!     at <anonymous>
ERR!  { ReferenceError: path is not defined
ERR!     at Object.webpackFinal (/Users/dcaine/Documents/webdev/test/scss-loader-example/.storybook/main.js:13:16)
ERR!     at accumulationPromise.then.newConfig (/Users/dcaine/Documents/webdev/test/scss-loader-example/node_modules/@storybook/core/dist/server/presets.js:261:72)
ERR!     at <anonymous>
ERR!   stack: 'ReferenceError: path is not defined\n    at Object.webpackFinal (/Users/dcaine/Documents/webdev/test/scss-loader-example/.storybook/main.js:13:16)\n    at accumulationPromise.then.newConfig (/Users/dcaine/Documents/webdev/test/scss-loader-example/node_modules/@storybook/core/dist/server/presets.js:261:72)\n    at <anonymous>' }

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

1 Ответ

0 голосов
/ 16 марта 2020

Добавление const path = require('path'); к .storybook/main.js решило мою проблему

...