Поскольку CSS предоставляется с text/html MIME-типом на сервере разработки веб-пакетов в моей системе разработки, Chrome отказывается загружать их:
Refused to apply style from 'http://localhost:3000/assets/bundles/baseRequirements-a07aa....css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Мои конфиги веб-пакета:
webpack.base.config.js
const path = require('path')
const entries = require('./entries')
const BundleTracker = require('webpack-bundle-tracker')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const {VueLoaderPlugin} = require('vue-loader')
module.exports = {
entry: entries,
output: {
filename: '[name]-[hash].bundle.js',
path: path.resolve('./assets/dist/')
},
plugins: [
new BundleTracker({filename: './assets/webpack-stats.json'}),
new VueLoaderPlugin(),
new ExtractTextPlugin({
filename: '[name]-[hash].css',
allChunks: true
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {loader: 'babel-loader'}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': ExtractTextPlugin.extract({
use: ['css-loader', 'sass-loader'],
fallback: 'vue-style-loader'
})
}
}
},
{
test: /\.jsx$/,
loader: 'babel-loader',
exclude: '/node_modules/',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [
'css-loader',
{
loader: 'sass-loader',
options: {
includePaths: [
path.resolve(process.cwd(), 'assets/src'),
path.resolve(process.cwd(), 'node_modules')
]
}
}
]
})
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: ['file-loader']
}
]
}
}
webpack.base.config.js
const merge = require('webpack-merge')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const baseWebpackConfig = require('./webpack.base.config')
const path = require('path')
module.exports = merge(baseWebpackConfig, {
output: {
filename: '[name].bundle.js',
publicPath: 'http://localhost:3000/assets/bundles/'
},
devtool: 'cheap-source-map',
devServer: {
contentBase: path.join(__dirname, 'assets/dist'),
headers: {
'Access-Control-Allow-Origin': '*'
},
port: 3000
},
plugins: [
new ExtractTextPlugin({
filename: '[name].css',
allChunks: true
})
]
})
пакетов.json
{
"name": "acme",
"version": "18.12.2",
"description": "ACME",
"private": true,
"scripts": {
"compile": "webpack --config webpack/webpack.prod.config.js --mode=production",
"watch": "webpack --config webpack/webpack.dev.config.js --watch --mode=development",
"start:dev": "webpack-dev-server --config webpack/webpack.dev.config.js --mode=development",
"lint-staged": "lint-staged"
},
"lint-staged": {
"assets/**/*.js": [
"standard --fix",
"git add"
],
"assets/**/*.jsx": [
"standard --fix",
"git add"
],
"assets/**/*.vue": [
"standard --fix",
"stylelint --fix",
"git add"
],
"assets/**/*.*css": [
"stylelint --fix",
"git add"
],
"acme/**/*.py": [
"black",
"git add"
]
},
"pre-commit": [
"lint-staged"
],
"standard": {
"parser": "babel-eslint",
"plugins": [
"html"
],
"globals": [
"$",
"_",
"log",
"oTable"
]
},
"browser": {
"vue": "vue/dist/vue.common.js"
},
"author": "",
"license": "ISC",
"stylelint": {
"extends": "stylelint-config-standard"
},
"dependencies": {
"@shopify/draggable": "^1.0.0-beta.7",
"accounting-js": "^1.1.1",
"ansi-styles": "^3.2.0",
"axios": "^0.17.1",
"bootstrap-sass": "^3.3.7",
"bootstrap-slider": "^10.2.1",
"bootstrap-toggle": "^2.2.2",
"classnames": "^2.2.5",
"clipboard": "^1.7.1",
"css-element-queries": "^0.4.0",
"debounce": "^1.1.0",
"fixed-data-table-2": "^0.7.12",
"get-form-data": "^2.0.0",
"humanize-plus": "^1.8.2",
"iframe-resizer": "^3.6.2",
"inputmask": "^4.0.0",
"jquery": "^2.2.4",
"jquery.mousewheel": "^3.1.9",
"js-cookie": "^2.2.0",
"js-storage": "^1.0.4",
"localforage": "^1.5.5",
"lodash": "^4.13.1",
"querystring": "^0.2.0",
"ramda": "^0.25.0",
"react": "^15.2.1",
"react-dimensions": "^1.3.0",
"react-dom": "^15.2.1",
"react-grid-layout": "^0.13.5",
"react-redux": "^4.4.5",
"react-select2-wrapper": "^1.0.2",
"redux": "^3.5.2",
"select2": "4.0.0",
"select2-bootstrap-theme": "0.1.0-beta.9",
"shortid": "^2.2.6",
"slugify": "^1.3.0",
"stimulus": "^1.0.1",
"stimulus-flatpickr": "^1.0.0",
"uiv": "^0.14.2",
"urijs": "^1.19.1",
"url-slug": "^2.0.0",
"uuid": "^2.0.2",
"validator": "^10.7.1",
"video.js": "^7.2.4",
"videojs-playlist": "^4.2.6",
"vue": "^2.5.5",
"vue-strap": "git+https://github.com/yuche/vue-strap.git#v2",
"vuedraggable": "^2.16.0",
"vuetable-2": "^1.7.0",
"vuex": "^3.0.1",
"vuex-persist": "^0.6.0",
"yuglify": "^0.1.4"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^9.0.0",
"babel-loader": "^7.1.4",
"babel-plugin-root-import": "^5.1.0",
"babel-plugin-transform-async-to-generator": "^6.16.0",
"babel-plugin-transform-class-properties": "^6.10.2",
"babel-plugin-transform-es2015-spread": "^6.8.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.8.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.11.0",
"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-vue": "^1.2.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"csscomb": "^3.1.7",
"envify": "^4.1.0",
"eslint": "^4.17.0",
"eslint-config-prettier": "^2.9.0",
"eslint-config-standard": "^11.0.0-beta.0",
"eslint-plugin-html": "^4.0.6",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-node": "^6.0.0",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"lint-staged": "^7.3.0",
"node-sass": "^4.9.0",
"pre-commit": "^1.2.2",
"prettier": "1.10.2",
"sass-loader": "^7.0.3",
"standard": "^12.0.1",
"style-loader": "^0.21.0",
"stylelint": "^9.3.0",
"stylelint-config-rational-order": "^0.0.2",
"stylelint-config-recommended-scss": "^3.2.0",
"stylelint-order": "^1.0.0",
"stylelint-scss": "^3.3.1",
"uglifyify": "^4.0.5",
"vue-loader": "^15.4.1",
"vue-style-loader": "^4.1.2",
"webpack": "^4.12.0",
"webpack-bundle-tracker": "^0.3.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.8",
"webpack-merge": "^4.1.4"
}
}
(я видел несколько SO вопросов о проблемах MIME в Webpack, но они в основном вращались вокруг стека MERN (MongoDB, Express, React / Redux и Node.js), которого нет нигдерядом с нашим стеком Django, Python, MySQL, Vue / Stimulus, и конфигурации веб-пакетов в них не похожи на наши.