質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.62%

webpackのcss cacheをclearしたい

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 1,839

bouzjp

score 10

webpack、および webpack-dev-server での開発環境で、scss の変更が反映されません。
js と html の変更は反映されているため、 scss のみキャッシュ?により反映されていないと考えています。
一度ビルドされてしまうとそれっきりで、開発にならないため参っています。
原因としては、webpack か babel、scss-loader と css-loader 周りが怪しいと思って色々試してはいるのですが、状況が変わらないため質問させて頂きました。

今回新しく構築した環境としては、下記の通りです。

  "dependencies": {
    "babel-polyfill": "6.26.0",
    "classnames": "2.2.6",
    "react": "16.5.2",
    "react-dom": "16.5.2",
    "react-redux": "5.0.7",
    "react-router": "4.3.1",
    "react-router-dom": "4.3.1",
    "react-router-redux": "4.0.8",
    "redux": "4.0.0",
    "redux-saga": "0.16.0"
  },
  "devDependencies": {
    "@types/classnames": "2.2.6",
    "@types/react": "16.4.14",
    "@types/react-css-modules": "4.6.2",
    "@types/react-dom": "16.0.8",
    "@types/react-redux": "6.0.9",
    "@types/react-router-dom": "4.3.1",
    "@types/react-router-redux": "5.0.16",
    "autoprefixer": "9.1.5",
    "babel-core": "6.26.3",
    "babel-loader": "7.1.2",
    "babel-plugin-react-css-modules": "3.4.2",
    "babel-preset-env": "1.7.0",
    "babel-preset-react": "6.24.1",
    "css-loader": "1.0.0",
    "eslint": "5.6.1",
    "eslint-config-airbnb-base": "13.1.0",
    "eslint-config-prettier": "3.1.0",
    "eslint-loader": "2.1.1",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-prettier": "2.7.0",
    "eslint-plugin-react": "7.11.1",
    "eslint-plugin-typescript": "0.12.0",
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "file-loader": "2.0.0",
    "html-webpack-plugin": "3.2.0",
    "node-sass": "4.9.3",
    "postcss-loader": "3.0.0",
    "postcss-scss": "2.0.0",
    "prettier": "1.14.3",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.0",
    "ts-loader": "5.2.1",
    "typescript": "3.1.1",
    "typescript-eslint-parser": "19.0.2",
    "uglifyjs-webpack-plugin": "2.0.1",
    "webpack": "4.20.2",
    "webpack-cli": "3.1.2",
    "webpack-dev-server": "3.1.9"
  }

webpackでは下記の通り、キャッシュをコントロールしてるはずなのですが...

module.exports = (env, argv) => {
  const __DEV__ = argv.mode === 'development';
  return ({
    module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: __DEV__
            }
          },
          'ts-loader'
        ]
      },
    ...

    ],   

    ...
    cache: false
  })
});

どなたかわかる方がいらっしゃればアドバイス頂けないでしょうか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • touho

    2019/09/14 13:17

    全く同じ課題に悩まされています。その後、解決策などはありましたか?

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る