[英]Import/apply CSS files with webpack
我对 webpack 一直很糟糕,但这次我被打败了......听起来很简单:我只想导入我的应用我的 CSS。
他是我的项目结构:
/src
|_assets/
| |_index.html
|_components/
| |_App.js
| |_WelcomeLogo.js
|_styles/
| |_welcomeLogo.css
|_index.js
因此,index.js 导入了 App.js,后者导入了 WelcomeLogo.js,并且 js 被正确呈现。 WelcomeLogo.js importwelcomeLogo.css : import './../styles/welcomeLogo.css';
这是我的 webpackConfig :
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
const autoprefixer = require('autoprefixer');
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.js|jsx$/,
exclude: [
/node_modules/,
/tests/
],
use: { loader: 'babel-loader' }
},
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()]
}
}
]
}
]
},
output: {
path: path.resolve(__dirname, './dist'),
filename: process.env.production ? `index.[chunkHash].js` : `index.[hash].js`
},
mode: 'development',
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3030,
open: true
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'BananaHammock.io',
template: 'src/assets/index.html',
meta: {
'http-equiv': 'cache-control',
'content': 'no-cache'
}
}),
]
};
所以问题是,没有 CSS 应用于我的输出应用程序......这是第一次没有设法做到这一点,感觉有点失落。 谢谢你的帮助。
网络包版本:4.41.2
npm run build
显示找到并解析了 css...但它的内容不是包的一部分:
-> % npm run build
> xxxxxx@1.0.0 build /Users/xxxx/Documents/workspace/javascript/xxxx.io
> webpack --mode production
Hash: 480520f961b41a464f93
Version: webpack 4.41.2
Time: 2137ms
Built at: 03/17/2020 9:19:56 PM
Asset Size Chunks Chunk Names
index.480520f961b41a464f93.js 134 KiB 0 [emitted] [immutable] main
index.html 822 bytes [emitted]
Entrypoint main = index.480520f961b41a464f93.js
[7] ./src/index.js 184 bytes {0} [built]
[12] (webpack)/buildin/harmony-module.js 573 bytes {0} [built]
[15] ./src/styles/welcomeLogo.css 573 bytes {0} [built]
[17] ./node_modules/css-loader/dist/cjs.js!./src/styles/welcomeLogo.css 235 bytes {0} [built]
+ 16 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/assets/index.html 927 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
+ 1 hidden module
如果我使用 MiniCssExtractPlugin,它会生成一个 css 文件...但为空。 而且我的welcomeLogo.css 文件不是空的,并且根据W3C 验证器是正确的...
我认为css导入路径是错误的。 它应该是“ ../styles/welcomeLogo.css
”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.