Question

我在assets / style.main.scss中有一个scss文件，该文件中有我想在所有组件中使用的变量。我做错了什么？

// config.js
import { configure } from '@storybook/vue';
import '!style-loader!css-loader!sass-loader!../assets/style/main.scss'

function loadStories () {
  const req = require.context('../.stories', true, /\.stories\.js$/)
  req.keys().forEach(filename => req(filename))
}
configure(loadStories, module)



// main.js
module.exports = {
  addons: ['@storybook/addon-actions', '@storybook/addon-knobs', '@storybook/addon-links'],
};

那是我遇到的错误：

ERROR in ./components/ButtonDefault.vue?vue&type=style&index=0&id=1c1779e4&lang=scss&scoped=true& (./node_modules/vue-loader/lib??vue-loader-options!./components/ButtonDefault.vue?vue&type=style&index=0&id=1c1779e4&lang=scss&scoped=true&) 33:0
Module parse failed: Unexpected token (33: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.
| 
| 
> .c-btn {
|     background-color: $color_blue;
| 
 @ ./components/ButtonDefault.vue?vue&type=style&index=0&id=1c1779e4&lang=scss&scoped=true& 1:0-158 1:174-177 1:179-334 1:179-334
 @ ./components/ButtonDefault.vue
 @ ./.stories/ButtonDefault.stories.js
 @ ./.stories sync \.stories\.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

Nuxt.js故事书使用外部scss文件

0 个答案: