Nodemon не перезагружается при изменении css

Sarkerdo

Sarkerdo

ＥＴＯ　ＦＩＡＳＫＯ
Регистрация
3 Янв 2016
Сообщения
178
Реакции
105
Ребята, весь мозг сломал, почему nodemon не меняет css, изменение происходит только после полной пересборки.
Запускаю nodemon app.js
в nodemon.json прописал
Код: 
{
  "ignore": [
    ".git",
    "node_modules/**/node_modules"
  ],
  "env": {
    "NODE_ENV": "development"
  },
  "ext": "js json css scss"
}
в app.js
Код: 
app.listen(PORT, () =>
  rainbow('App running..')
)
webpack
Код: 
const { join } = require('path')

module.exports = {
  entry: './public/js/src/main.js',
  output: {
    path: join(__dirname, '/public/js/dist/'),
    filename: 'bundle.js'
  },
  performance: {
    hints: false,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          'presets': [
            'env', 'react', 'stage-0'
          ],
          'plugins': [
            'react-html-attrs',
            'transform-class-properties',
            'transform-decorators-legacy',
            'transform-react-jsx-source',
          ]
        }
      }
    ]
  },
  watch: true
}
 
За пересборку отвечает webpack (watch: true), но в конфиге не вижу, чтобы ты его как-то обрабатывал.
 
frei написал(а):
За пересборку отвечает webpack (watch: true), но в конфиге не вижу, чтобы ты его как-то обрабатывал.
Нажмите для раскрытия...
Можно подробнее? В конфиге watch: true указано, restarting nodemon делает, в консоле это видно, но файл не изменился, именно css.
Как обработать watch: true?
 
Sarkerdo написал(а):
Можно подробнее? В конфиге watch: true указано, restarting nodemon делает, в консоле это видно, но файл не изменился, именно css.
Как обработать watch: true?
Нажмите для раскрытия...

А что именно происходит с css? Они собираются в один бандл? Где это прописано.
 
frei написал(а):
А что именно происходит с css? Они собираются в один бандл? Где это прописано.
Нажмите для раскрытия...
Да, в 1 собираются
при таком webpack
Код: 
const
    { join } = require('path'),
    ExtractTextPlugin = require("extract-text-webpack-plugin"),
    const extractSass = new ExtractTextPlugin({
    filename: "styles.css"
});
module.exports = {
    entry: [
        './public/js/src/main.js',
        './public/styles/src/styles.scss'
  ],
  output: {
    path: join(__dirname, '/public/build/'),
    filename: 'bundle.js'
  },
  performance: {
        hints: false
    },
    devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          'presets': [
            'env', 'react', 'stage-0'
          ],
          'plugins': [
            'react-html-attrs',
            'transform-class-properties',
            'transform-decorators-legacy',
            'transform-react-jsx-source',
          ]
        }
      },
            {
            test: /\.scss$/,
            use: extractSass.extract({
                use: [{
                    loader: "css-loader"
                }, {
                loader: "sass-loader", options: {
                    sourceMap: true
                }}],
                // use style-loader in development
                fallback: "style-loader"
            })
            }
    ]
  },
    plugins: [
    extractSass
  ],
    watch: true
}
Все собирается, в Public появляется папка build в ней bundle.js и styles.css
но, если к примеру, я меняю в любом файле scss, изменений не происходит автоматически, приходится заново пересобирать и так после каждого изменения, что очень неудобно при разработке
 
А какая версия webpack и extract-text-webpack-plugin? С webpack 4 для работы с css добавили
mini-css-extract-plugin, а extract-text-webpack-plugin не поддерживается.
 
frei написал(а):
А какая версия webpack и extract-text-webpack-plugin? С webpack 4 для работы с css добавили
mini-css-extract-plugin, а extract-text-webpack-plugin не поддерживается.
Нажмите для раскрытия...
Версия webpack 3.11.0, вопрос стоит в другом, у меня нет ошибок в плане того, что есть сейчас, все собирается, и в консоле видно что перезагрузка идет, но файл остается неизмененным
Во весь package
Код: 
{
  "name": "App",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "nodemon app.js",
    "dev": "webpack -d --watch",
    "prod": "webpack -p --watch",
    "env": "handy-client-env",
    "test": "jest",
    "test:watch": "jest --watchAll",
    "test:coverage": "jest --coverage"
  },
  "dependencies": {
    "animate-components": "^1.4.8",
    "axios": "^0.17.1",
    "bcrypt-nodejs": "^0.0.3",
    "body-parser": "^1.18.2",
    "client-sessions": "^0.8.0",
    "cookie-parser": "^1.4.3",
    "dotenv": "^4.0.0",
    "express": "^4.16.2",
    "express-handlebars": "^3.0.0",
    "express-validator": "^4.3.0",
    "handy-client-env": "^1.0.13",
    "handy-copy": "^1.0.9",
    "handy-image-processor": "^1.0.1",
    "handy-log": "^1.0.3",
    "handy-notification": "^1.0.26",
    "handy-timeago": "^1.0.1",
    "image-compressor.js": "^1.1.1",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4",
    "morgan": "^1.9.0",
    "multer": "^1.3.0",
    "mysql": "^2.15.0",
    "nodemailer": "^4.4.1",
    "nodemon": "^1.17.3",
    "prop-types": "^15.6.0",
    "query-string": "^5.1.0",
    "react": "^16.2.0",
    "react-content-loader": "^3.1.1",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "^16.2.0",
    "react-helmet": "^5.2.0",
    "react-photo-gallery": "^6.0.22",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-tooltip": "^3.4.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-promise-middleware": "^5.0.0",
    "redux-thunk": "^2.2.0",
    "serve-favicon": "^2.4.5",
    "webpack": "^3.11.0"
  },
  "devDependencies": {
    "@types/jquery": "^3.3.0",
    "@types/lodash": "^4.14.104",
    "@types/react": "^16.0.38",
    "@types/react-redux": "^5.0.15",
    "@types/react-router-dom": "^4.2.4",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.3",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-html-attrs": "^2.1.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-react-jsx-source": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "eslint": "^4.13.0",
    "eslint-plugin-react": "^7.5.1",
    "jest": "^22.4.2"
  }
}
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху