css - Webpack - postcss-import 找不到带有 VueJs 的 CSS 文件
问题描述
我无法让它在我的 VueJs 项目中加载 css 文件我最近添加了 less-loader 和 sass-loader 这些工作正常。但是当我在 sass 文件或 main.js 中添加一个 css 文件时,它无法找到该文件。
这就是我正在做的事情:
萨斯:
@import "../../../../node_modules/pnotify/dist/PNotifyBrightTheme.css";
或js:
import 'module/pnotify/dist/PNotifyBrightTheme.css'
webpack.base.config:
resolve: {
extensions: ['.js', '.vue', '.json', '.css'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'module': resolve('node_modules')
}
},
module: {
rules: [{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 }
},
'postcss-loader'
]
}]
}
postcssrc.js 文件:
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"autoprefixer": {}
}
}
安装的模块:
"css-loader": "^0.28.11",
"postcss-load-config": "^1.2.0",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.1.4",
"postcss-url": "^7.2.1",
"style-loader": "^0.21.0",
带有 css 文件的库
"pnotify": "^4.0.0-alpha.4",
例外:
in ./src/assets/scss/index.scss
Module build failed: Error: Failed to find '../../../../node_modules/pnotify/dist/PNotifyBrightTheme.css'
in [
/src/assets/scss
]
at resolveModule.catch.catch (/node_modules/postcss-import/lib/resolve-id.js:35:13)
at <anonymous>
@ ./src/assets/scss/index.scss 4:14-212 13:3-17:5 14:22-220
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
有人知道该怎么做吗?我越来越绝望:(
解决方案
经过多次研究,我通过这样做解决了这个问题。
- 在 npm 中完全卸载 postcss 并删除 build/utils.js 和 build/webpack.base.config.js 中的所有配置
- 保持 css-loader 和 style-loader 安装,不要将它们添加到 webpack 配置中,因为 VueJs 已经安装了它。-> https://github.com/webpack-contrib/css-loader/issues/362
一些杀死我的 CSS 加载/导入的示例代码:在 build/utils.js
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
//remove this
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
//change to const loaders = [cssLoader]
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
}
}
同时删除所有这些代码:在 webpack 配置中
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 }
},
'postcss-loader'
]
},
推荐阅读
- javascript - 我们可以将浏览器 JavaScript 的执行上下文从 Window 对象更改为其他对象吗?
- javascript - 用户将确切数量的元素输入到数组中
- stream - 没有元素的无限流
- assembly - 将寄存器加载到自身的指令的目的是什么?
- native - 如何使用 MethodChannel 从本机平台调用应用程序 Dart 部分中的方法?
- algorithm - Tree : BST 中栈实现与遍历递归调用的性能比较
- r - 替换字符串中的第 n 个数字
- babeljs - Babel 插件可以扩展解析器以添加新的关键字吗?
- php - oembed_result 没有在我的 Wordpress 主题上运行
- python - 按高度/方向对图像进行排序