Webpack - postcss-import 找不到带有 VueJs 的 CSS 文件答案

【问题标题】：Webpack - postcss-import cannot find CSS Files with VueJsWebpack - postcss-import 找不到带有 VueJs 的 CSS 文件
【发布时间】：2018-06-16 09:43:00
【问题描述】：

我无法在我的 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

有人知道怎么做吗？我越来越绝望了:(

【问题讨论】：

标签： css webpack vuejs2 postcss css-loader

【解决方案1】：

经过多次研究，我通过这样做解决了问题。

在 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'
   ]
 },

【讨论】：