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 }) });
どなたかわかる方がいらっしゃればアドバイス頂けないでしょうか。
あなたの回答
tips
プレビュー