21.10.2018, 18:43
|
|
Профессор
|
|
Регистрация: 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',
}),
],
}
|
|
22.10.2018, 10:16
|
 |
Профессор
|
|
Регистрация: 18.05.2011
Сообщений: 1,207
|
|
|
А в node_modules они лежать хоть? npm ci или npm install сделай и попробуй ещё раз запустить.
|
|
22.10.2018, 11:24
|
|
Профессор
|
|
Регистрация: 28.04.2017
Сообщений: 214
|
|
А вот в приведённом примере 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 |
|
22.10.2018, 11:30
|
|
Профессор
|
|
Регистрация: 18.05.2011
Сообщений: 1,207
|
|
|
Цитата:
|
|
А вот в приведённом примере bootstrap-vue - импортируемый файл просто рядом лежит - import './table.css' - его тоже в node_modules отправить?
|
Нет, его туда не надо. Для него должно быть описано правило в конфиге вебпака, как обрабатывать такие импорты, что-то типо
{
test: /\.css$/,
loader: 'style!css',
options: { modules: true }
}
И вот эти самые style-loader и css-loader, должны быть в node_modules.
Скинь package.json ещё. |
|
22.10.2018, 11:36
|
|
Профессор
|
|
Регистрация: 28.04.2017
Сообщений: 214
|
|
Всё это есть. Ну не работает...
Вот эта простыня
{
"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"
]
}
]
]
}
}
}
}
|
|
22.10.2018, 11:50
|
|
Профессор
|
|
Регистрация: 18.05.2011
Сообщений: 1,207
|
|
|
Гляну.
Ещё такой момент непонятен: в package.json, на задаче "dev" прописан путь до конфига вебпака "webpack.config.dev.js", а в первом сообщении ты пишешь про webpack.config.base.js ? На 68 и 69 строчках вебпак конфига синтаксическая ошибка (2 }}), и что за переменная config тоже непонятно...
Последний раз редактировалось destus, 22.10.2018 в 11:57.
|
|
22.10.2018, 12:12
|
|
Профессор
|
|
Регистрация: 28.04.2017
Сообщений: 214
|
|
|
Да нету там ошибки (webpack бы просто не запустился), это я скопировал и свой матерный камент неаккуратно стёр.
И там, просто, запускается dev-server, запрашивает webpack.config.base.js и делает merge.
|
|
22.10.2018, 18:44
|
|
Профессор
|
|
Регистрация: 28.04.2017
Сообщений: 214
|
|
|
Кхе-кхе... у меня тут всё заработало (спустя три дня отчаяния).
Но сказать мне по этому поводу нечего, потому что я сам не понял, что я сделал - чтобы оно заработало.
Не знаю, что делают в таких случаях - видимо, удаляют вопрос? - Ну завтра и удалю.
|
|
22.10.2018, 18:59
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от Audaxviator
|
|
Не знаю, что делают в таких случаях - видимо, удаляют вопрос? -
|
обычно ничего не делают ... |
|
23.10.2018, 14:27
|
|
Профессор
|
|
Регистрация: 28.04.2017
Сообщений: 214
|
|
|
Ну ладно, не удалю.
А в целом, оно вроде бы понятно стало.
Тут дело в том, что когда это Vue - не нужен совсем модуль style-loader (вместо него уже есть vue-style-loader), но нужен css-loader - однако, его не надо писать в конфиг webpack.
css-loader есть в зависимостях vue-style-loader, он его сам подтягивает, а последний - подтягивается модулем vue-loader, а перед ним код парсится babel-loader.
Словом, надо меньше букав писать в webpack.config.js - чем меньше букав, тем лучше всё работает.
|
|
|
|
