search

maoberlehner / node-sass-magic-importer

Custom node-sass importer for selector specific imports, module importing, globbing support and importing files only once.
MIT License
292 stars 28 forks source link

[node-sass-glob-importer] Webpack Dev Server don't watch edited imported files using globbing #196

Closed mperu92 closed 5 years ago

mperu92 commented 5 years ago

When i edit my .scss file imported through main.scss, webpack-dev-server doesn't watch editing.

This is config on 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()
            }
        }
    ]
},

/// ...

import in the main.scss:

@import "/core/utility/*.scss";

// ...

but files inside utility folder are not beign watched by webpack-dev-server . Does anyone know what the problem might be?

maoberlehner commented 5 years ago

EDIT: Just realized this is not a duplicate of https://github.com/maoberlehner/node-sass-magic-importer/issues/178

Usually this should work with webpack. Config looks fine-

mperu92 commented 5 years ago

EDIT: Just realized this is not a duplicate of #178

Usually this should work with webpack. Config looks fine-

Thanks, while I wait if someone can give me more informations, I continue to do tests. If I can unlock the situation I'll let you know!

If it can be useful I'm using node v10.16.0 and this is my 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"
  }
}
mperu92 commented 5 years ago

Issue solved itself, after restarting devServer now seems reading globbed files