Показать сообщение отдельно
  #1 (permalink)  
Старый 21.10.2018, 18:43
Профессор
Отправить личное сообщение для Audaxviator Посмотреть профиль Найти все сообщения от Audaxviator
 
Регистрация: 28.04.2017
Сообщений: 214

Запрос из файла .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',
    }),
  ],
}
Ответить с цитированием