当*不*使用 CLI 时，Webpack 会在 Vue 中渲染 CSS

Posted 2023-02-23

【中文标题】当*不*使用 CLI 时，Webpack 会在 Vue 中渲染 CSS

【英文标题】：Webpack issues rendering CSS in Vue when *not* using CLI

【发布时间】：2021-01-20 22:06:50

【问题描述】：

我是第一次使用 Vue (v2) 并且正在从头开始构建我的应用程序，因为我的讲师不希望我们使用 CLI 样板。我被困了好几个小时，无法弄清楚如何在组件的 .vue 文件的 标签中呈现 CSS。我认为这与我的 webpack 配置有关...构建已成功编译，但如果样式位于

我可以通过外部样式表来渲染 CSS（我在 index.html 中链接它），但 Vue 的重点不是拥有组件的所有内容（模板、脚本、样式）在一个地方（.vue 文件）？嘎。请查看下面我的 webpack 配置，如果有什么引起您的注意，请告诉我。这只是我第二次使用 webpack，所以我肯定还在学习中。

const  join  = require('path');
const  VueLoaderPlugin  = require('vue-loader');
const  HotModuleReplacementPlugin  = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = 
  mode: 'development',
  entry: join(__dirname, 'src/app.js'),
  output: 
    path: join(__dirname, 'build'),
    filename: 'app.min.js',
  ,
  module: 
    rules: [
      
        test: /\.js$/,
        loader: 'babel-loader',
        options: 
          presets: ['@babel/preset-env'],
        ,
      ,
      
        test: /\.vue$/,
        use: 'vue-loader',
      ,
      
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
        ],
      ,
    ],
  ,
  plugins: [
    new HotModuleReplacementPlugin(),
    new VueLoaderPlugin(),
    new HTMLWebpackPlugin(
      showErrors: true,
      cache: true,
      template: (join(__dirname, 'index.html')),
    ),
  ],
;

如果有帮助，这是我的 package.json。

  "name": "ontheroadagain",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "start": "nodemon index.js",
    "dev": "webpack-dev-server --mode development",
    "prod": "webpack --mode production",
    "test": "eslint --fix *.js",
    "fix": "eslint --fix *.js",
    "build": "webpack --config webpack.config.dev.js -w"
  ,
  "repository": 
    "type": "git",
    "url": "an actual url is here"
  ,
  "author": "",
  "license": "ISC",
  "bugs": 
    "url": "an actual url is here"
  ,
  "homepage": "an actual url is here",
  "devDependencies": 
    "@babel/cli": "^7.11.6",
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.3.0",
    "eslint": "^7.10.0",
    "eslint-config-airbnb-base": "^14.2.0",
    "eslint-plugin-import": "^2.22.1",
    "html-webpack-plugin": "^4.5.0",
    "husky": "^4.3.0",
    "vue-loader": "^15.9.3",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  ,
  "dependencies": 
    "express": "^4.17.1",
    "mysql2": "^2.2.5",
    "sequelize": "^6.3.5",
    "vue": "^2.6.12",
    "vue-router": "^3.4.5"
  ,
  "husky": 
    "hooks": 
      "pre-commit": "npm run fix",
      "pre-push": "npm run fix",
      "...": "..."
    
  

【参考方案1】：

问题是我的 vue-style-loader 版本与 css-loader 不兼容。我选择为这个项目使用样式加载器。