当我编辑通过.scss
导入的main.scss
文件时,webpack-dev-server
不会观看编辑。
这是webpack.config.dev.js
上的配置:
const globImporter = require('node-sass-glob-importer');
/// ...
{
test: /\.s[c|a]ss$/,
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 3,
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: [
require('autoprefixer')({
grid: true,
remove: true,
}),
require('postcss-flexbugs-fixes'),
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
importer: globImporter()
}
}
]
},
/// ...
导入main.scss
:
@import "/core/utility/*.scss";
// ...
但是utility
不会监视webpack-dev-server
文件夹中的文件。
有谁知道可能是什么问题?
如果有用,我正在使用
node v10.16.0
这是我的package.json
:
{
...
"main": "main.js",
"scripts": {
"start": "webpack-dev-server --inline --progress -d --hot --config webpack.dev.config.js --watch",
"build": "SET NODE_ENV=dev & webpack -p --config webpack.config.js --progress"
},
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-proposal-decorators": "^7.4.4",
"@babel/plugin-proposal-do-expressions": "^7.2.0",
"@babel/plugin-proposal-export-default-from": "^7.2.0",
"@babel/plugin-proposal-export-namespace-from": "^7.2.0",
"@babel/plugin-proposal-function-bind": "^7.2.0",
"@babel/plugin-proposal-function-sent": "^7.2.0",
"@babel/plugin-proposal-json-strings": "^7.2.0",
"@babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
"@babel/plugin-proposal-numeric-separator": "^7.2.0",
"@babel/plugin-proposal-object-rest-spread": "^7.4.4",
"@babel/plugin-proposal-optional-chaining": "^7.2.0",
"@babel/plugin-proposal-pipeline-operator": "^7.3.2",
"@babel/plugin-proposal-throw-expressions": "^7.2.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-syntax-import-meta": "^7.2.0",
"@babel/plugin-transform-object-assign": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"@babel/preset-stage-0": "^7.0.0",
"@babel/preset-stage-2": "^7.0.0",
"@babel/types": "^7.4.4",
"autodll-webpack-plugin": "^0.4.2",
"autoprefixer": "^9.5.1",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-plugin-add-module-exports": "^1.0.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-transform-function-bind": "^6.22.0",
"babel-plugin-transform-imports": "^1.5.1",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"clean-webpack-plugin": "^2.0.2",
"copy-webpack-plugin": "^5.0.3",
"css-loader": "^2.1.1",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.13.0",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"import-glob-loader": "^1.1.0",
"imports-loader": "^0.8.0",
"json-loader": "^0.5.7",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"less-plugin-clean-css": "^1.5.1",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"node-sass-glob-importer": "^5.3.2",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.1.2",
"url-loader": "^1.1.2",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1",
"webpack-disk-plugin": "^0.0.2",
"webpack-import-glob-loader": "^1.6.3",
"workbox-webpack-plugin": "^4.3.1",
"write-file-webpack-plugin": "^4.5.0"
},
"dependencies": {
"antd": "^3.17.0",
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"classnames": "^2.2.6",
"glyphicons": "^0.2.0",
"image-webpack-loader": "^4.6.0",
"immutability-helper": "^3.0.0",
"jquery": "3.3.1",
"jquery-validate": "^2.0.0",
"jquery-validation-unobtrusive": "^3.2.11",
"lodash": "^4.17.11",
"material-icons": "^0.3.1",
"modernizr": "^3.7.1",
"moment": "^2.24.0",
"path": "^0.12.7",
"popper.js": "^1.15.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.8",
"react-bootstrap-modal": "^4.2.0",
"react-checkbox-tree": "^1.5.1",
"react-compose": "^2.0.0",
"react-country-region-selector": "^1.4.3",
"react-crud-admin": "^1.0.47",
"react-css-modules": "^4.7.10",
"react-dnd": "^7.4.5",
"react-dnd-html5-backend": "^7.4.4",
"react-dom": "^16.8.6",
"react-grid-layout": "^0.16.6",
"react-image-gallery": "^0.8.16",
"react-loading-screen": "^0.0.17",
"react-material-icons": "^1.0.3",
"react-parallax": "^2.2.0",
"react-prism": "^4.3.2",
"react-redux": "^7.0.3",
"react-router-dom": "^5.0.0",
"react-scroll": "^1.7.11",
"react-scroll-parallax": "^2.1.2",
"react-select": "^2.4.3",
"react-shopping-cart": "^1.8.2",
"react-stamp": "^0.6.0",
"react-text-input": "^0.0.8",
"react-text-truncate": "^0.14.1",
"react-transition-group": "^4.0.1",
"react-virtualized": "^9.21.1",
"reactstrap": "^8.0.0",
"redux": "^4.0.1",
"reqwest": "^2.0.5",
"sass-loader": "^7.1.0",
"toastr": "^2.1.4",
"webpack-md5-hash": "^0.0.6"
}
}