Такой вопрос.
Есть приложение (довольно сложное), на 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',
}),
],
}