vue import css 文件时 webpack 总是报错
//In package.json:
devDependencies:{
"less": "^3.8.1",
"less-loader": "^4.1.0",
"vue-style-loader": "^3.1.2",
"style-loader": "^0.23.1",
"css-loader": "^0.28.11",
...
}
//webpack.base.conf.js 文件配置
{
test:/\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
},
//main.js 引入
import 'photoswipe/dist/photoswipe.css'然后webpack 就会报错,如下:
Module build failed: Syntax Error
(5:1) Unknown word
3 | // load the styles
4 | var content = require("!!../../css-loader/index.js??ref--7-1!../../postcss-loader/lib/index.js??ref--7-2!./photoswipe.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | if(content.locals) module.exports = content.locals;
7 | // add the styles to the DOM查到的解决方法都解决不了:
1.调换webpack 配置文件的顺序(无效),将style-loader放到第一位:
{
test:/\.css$/,
use: [
'style-loader',//这个本来就在第一位
'css-loader',
'postcss-loader'
]
},2.重装style-loader(无效)
3.仅留下css-loader(无效)
{
test: /\.css$/,
loader: 'style-loader'
}github上面的bug演示地址
github上面关于此问题的讨论
github上面关于此问题的讨论2
这个错误通常意味着你在尝试引入一个CSS文件，但是它被识别为一个JS文件。解决这个问题的一种方法是确保你的CSS文件和JS文件都位于同一目录下。
如果你的CSS文件位于你的JS文件的同一个目录下，那么你应该可以正确地引入它。如果你的CSS文件不在JS文件的同一个目录下，你需要提供一个绝对路径或相对路径来引入它。
例如，如果你的CSS文件位于src样式目录下，那么你可以这样引入它：
javascript
import './styles.css';
如果你的CSS文件位于./styles目录下，那么你可以这样引入它：
javascript
import './styles.css';
如果你的CSS文件位于./styles目录下，但是JS文件不在./styles目录下，你需要提供一个相对路径来引入它：
javascript
import './styles.css';
例如，如果你的CSS文件位于./styles目录下，但是JS文件在./src目录下，你可以这样引入它：
javascript
import './styles.css';
请注意，如果你的CSS文件位于一个子目录中，你需要提供一个相对于./styles目录的绝对路径。
