Javascript-форум (https://javascript.ru/forum/)
-   Сборка проекта, утилиты (https://javascript.ru/forum/server-tools/)
-   -   Запрос из файла .js не находит файл .css (https://javascript.ru/forum/server-tools/75577-zapros-iz-fajjla-js-ne-nakhodit-fajjl-css.html)

Audaxviator 21.10.2018 18:43
Запрос из файла .js не находит файл .css
 
Такой вопрос.
Есть приложение (довольно сложное), на Vue, и я пытаюсь его как-то запустить командой npm run dev, которая запускает webpack-dev-server. В приложении есть файлы .js - ну например, vue-gallery.js - которые запрашивают, в том числе, файлы .css - ну конкретно этот файл запрашивает
require('blueimp-gallery/css/blueimp-gallery.min.css')

Или bootstrap-vue - у этого есть файл table.js, в котором написано 
import './table.css'
- который в нём просто лежит рядом.
Ну вот, запускаю я npm run dev - и все они Modules not found.

Конечно, в webpack.config.base.js указаны и style-loader, и css-loader, и штук пятнадцать уже плагинов к Бабелю - Modules not found (или These relative modules were not found, что одно и то же)

Я уже и так пробовал дописать
require('style-loader!css-loader?modules!blueimp-gallery/css/blueimp-gallery.min.css')

Результат тот же.
Подскажите, если кто знает, как с этим можно бороться?
Мне рассказывали, что Webpack - это такой замечательный инструмент, у которого любые файлы - всё "модули". Что не так?

А, ну конфиг выглядит так

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json', '.css'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
        options: {
          plugins: ['babel-plugin-transform-require-ignore']
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.css$/,
        loader: 'style!css',
        options: { modules: true }
      },
      {
        test: /\.css$/,
        loader: 'postcss-loader',
        }
      }
    ]
  },
  node: {
    setImmediate: false,
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      jquery: 'jquery',
    }),
  ],
}

destus 22.10.2018 10:16
А в node_modules они лежать хоть? npm ci или npm install сделай и попробуй ещё раз запустить.

Audaxviator 22.10.2018 11:24
А вот в приведённом примере bootstrap-vue - импортируемый файл просто рядом лежит - import './table.css' - его тоже в node_modules отправить?

Не работает импорт CSS (!!!!)
Я уже эти пять случаев просто закомментил, чтобы посмотреть - дальше чё будет?
А дальше - импорт CSS не работает и в файлах компонентов. В компоненте Layuot.vue (какбэ самом главном) есть заветная строчка:
import '../../styles/Layuot.scss'

а там переменные стилей. Соответственно, если и его закамментить, то все страницы начинаю орать Undefined variables

Ну и... он тоже - not found
Файлы .js - found, а файлы .css/.scss -not found

destus 22.10.2018 11:30
Цитата:
А вот в приведённом примере bootstrap-vue - импортируемый файл просто рядом лежит - import './table.css' - его тоже в node_modules отправить?
Нет, его туда не надо. Для него должно быть описано правило в конфиге вебпака, как обрабатывать такие импорты, что-то типо 
{
        test: /\.css$/,
        loader: 'style!css',
        options: { modules: true }
}

И вот эти самые style-loader и css-loader, должны быть в node_modules.
Скинь package.json ещё.

Audaxviator 22.10.2018 11:36
Всё это есть. Ну не работает...
Вот эта простыня
{
  "name": "sing",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit",
    "build": "node build/build.js",
    "na": "napa"
  },
  "napa": {
    "bootstrap_calendar": "https://github.com/xero/bootstrap_calendar.git#1.0.1",
    "jquery.flot.animator": "https://github.com/Codicode/flotanimator.git#3c256c0183d713fd3bf41d04417873928eb1a751",
    "flot.dashes": "https://github.com/cquartier/flot.dashes.git",
    "jquery.flot-orderBars": "https://github.com/emmerich/flot-orderBars.git"
  },
  "dependencies": {
    "animate.css": "^3.6.1",
    "awesome-bootstrap-checkbox": "^1.0.1",
    "bootstrap": "^4.1.1",
    "bootstrap-vue": "^2.0.0-rc.11",
    "d3": "3.5.17",
    "easy-pie-chart": "^2.1.7",
    "flot": "^0.8.0-alpha",
    "font-awesome": "4.7.0",
    "fullcalendar": "^3.9.0",
    "glyphicons-halflings": "^1.9.1",
    "govpredict-morris": "^0.5.1",
    "jquery": "^3.3.1",
    "jquery-mapael": "^2.2.0",
    "jquery-sparkline": "2.4.0",
    "jquery-ui": "^1.12.1",
    "jquery.animate-number": "^0.0.14",
    "jvectormap": "^2.0.4",
    "line-awesome": "icons8/line-awesome",
    "mavon-editor": "^2.6.15",
    "messenger": "git+https://github.com/HubSpot/messenger.git#v1.4.2",
    "metrojs": "^0.9.77",
    "moment": "^2.22.2",
    "napa": "^3.0.0",
    "node-sass": "^4.9.0",
    "nvd3": "1.8.6",
    "popper.js": "^1.14.4",
    "rickshaw": "1.6.0",
    "sass-loader": "^7.0.1",
    "skycons": "^1.0.0",
    "v-mask": "^1.3.2",
    "vee-validate": "^2.1.0-beta.6",
    "vue": "^2.5.2",
    "vue-bootstrap-slider": "^1.2.0",
    "vue-color": "^2.4.6",
    "vue-draggable-nested-tree": "^2.0.2",
    "vue-form-wizard": "^0.8.4",
    "vue-gallery": "^1.4.0",
    "vue-router": "^3.0.1",
    "vue-select": "^2.4.0",
    "vue-slick": "^1.1.13",
    "vue-tables-2": "^1.4.63",
    "vue-textarea-autosize": "^1.0.4",
    "vue-touch": "2.0.0-beta.1",
    "vue-trumbowyg": "^3.3.0",
    "vue2-datepicker": "^2.0.4",
    "vue2-dropzone": "^3.2.2",
    "vue2-google-maps": "^0.9.7",
    "vuedraggable": "^2.16.0",
    "vuetrend": "^0.3.2",
    "vuex": "^3.0.1",
    "webpack-raphael": "^2.1.4",
    "widgster": "^1.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-css-modules-transform": "^1.6.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-require-ignore": "^0.1.1",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "blueimp-gallery": "git+https://github.com/blueimp/Gallery.git",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.11",
    "eslint": "^4.15.0",
    "eslint-config-airbnb-base": "^11.3.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-import-resolver-webpack": "^0.8.3",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "imports-loader": "^0.8.0",
    "jest": "^22.0.4",
    "jest-serializer-vue": "^0.3.0",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-jest": "^1.0.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "eslintConfig": {
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true,
        "modules": true,
        "experimentalObjectRestSpread": true
      },
      "env": {
        "es6": true,
        "browser": true
      }
    }
  },
  "babel": {
    "plugins": [
      "css-modules-transform"
    ],
    "env": {
      "node": {
        "plugins": [
          [
            "babel-plugin-transform-require-ignore",
            {
              "extensions": [
                ".less",
                ".sass",
                ".css"
              ]
            }
          ]
        ]
      }
    }
  }
}

destus 22.10.2018 11:50
Гляну.
Ещё такой момент непонятен: в package.json, на задаче "dev" прописан путь до конфига вебпака "webpack.config.dev.js", а в первом сообщении ты пишешь про webpack.config.base.js ? На 68 и 69 строчках вебпак конфига синтаксическая ошибка (2 }}), и что за переменная config тоже непонятно...

Audaxviator 22.10.2018 12:12
Да нету там ошибки (webpack бы просто не запустился), это я скопировал и свой матерный камент неаккуратно стёр.
И там, просто, запускается dev-server, запрашивает webpack.config.base.js и делает merge.

Audaxviator 22.10.2018 18:44
Кхе-кхе... у меня тут всё заработало (спустя три дня отчаяния).
Но сказать мне по этому поводу нечего, потому что я сам не понял, что я сделал - чтобы оно заработало.
Не знаю, что делают в таких случаях - видимо, удаляют вопрос? - Ну завтра и удалю.

рони 22.10.2018 18:59
Цитата:
Сообщение от Audaxviator
Не знаю, что делают в таких случаях - видимо, удаляют вопрос? -
обычно ничего не делают ...

Audaxviator 23.10.2018 14:27
Ну ладно, не удалю.

А в целом, оно вроде бы понятно стало.
Тут дело в том, что когда это Vue - не нужен совсем модуль style-loader (вместо него уже есть vue-style-loader), но нужен css-loader - однако, его не надо писать в конфиг webpack.
css-loader есть в зависимостях vue-style-loader, он его сам подтягивает, а последний - подтягивается модулем vue-loader, а перед ним код парсится babel-loader.

Словом, надо меньше букав писать в webpack.config.js - чем меньше букав, тем лучше всё работает.


Часовой пояс GMT +3, время: 17:19.