StorybookのWebpack拡張を使ってsass-loaderを読み込みたい


#1

NuxtでStorybookを導入し、こちらを参考に共通のscssファイルを読め込めるようにしたいのですが、うまくいきません。。

読み込みたいファイル

root/assets/sass/common.scss

設定ファイル

const path = require('path')
const rootPath = path.resolve(__dirname, '../')

module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.(scss|css)$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    include: rootPath
  })

  // こちらが効いているのは確認済みなのでwebpack.config.js自体は読み込めています
  defaultConfig.resolve.alias['@'] = rootPath
  defaultConfig.resolve.alias['~'] = rootPath

  return defaultConfig;
}

上記記述は

  • include配下の全てのcss, scssを
  • [“style-loader”, “css-loader”, “sass-loader”]を使って
  • トランスパイルする

という認識でいますが、現状、config.js等に

import '!style-loader!css-loader!../assets/sass/common.scss'

を入れてあげないと読み込めず。。。

初歩的で申し訳ありませんがご教示頂けますと幸いです。


#2

記載の include については scss の @import 構文のルートパスだと思われます。

別途sass-resources-loader等を検討頂く必要があると思います。
(全体にcommon.scssが読めれば良いのかなという認識です)

下記もしかしたら参考になるかもしれません。


#3

記載の include については scss の @import 構文のルートパスだと思われます。

ご指摘頂きありがとうございます!
理解できておらず申し訳ございませんでした!

頂いた参考情報をもとに記載したところうまくできました!
webpackの理解深めます!

ご回答頂きありがとうございました!


#4

それ全部は必要ではありません。以下のようにできます。

npm install --save-dev node-sass sass-loader
<style lang="scss">
.red {
  color: red
}
</style>

https://nuxtjs.org/faq/pre-processors/

読み込みファイルの場合は、nuxt.config.jsで以下のように編集してください。

css: [
    {
      src: '~/assets/styles/main.scss',
      lang: 'scss'
    }
  ],

#5

ありがとうございます!
nuxtで利用する場合は
Storybookでwebpackを使う場合にはnuxt.config.jsを使えない為別途Storybook用のwebpackを設定する必要があるのかなと思います🙇