webpack中css-loader、style-loader的使用

最新推荐文章于 2024-05-09 09:54:35 发布

每一天，每一步

最新推荐文章于 2024-05-09 09:54:35 发布

阅读量878

点赞数 3

分类专栏： webpack Vue 文章标签： css html5 javascript vue webpack

本文链接：https://blog.csdn.net/u010234868/article/details/120385072

版权

Vue 同时被 2 个专栏收录

122 篇文章 2 订阅

订阅专栏

webpack

20 篇文章 0 订阅

订阅专栏

项目目录结构如下：

各文件源码如下：

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

    <!-- <script src="./vue.js"></script> -->
    <!-- build.js为webpack打包后的文件 -->
    <script src="./build.js"></script>
</body>
</html>

main.js：

// esModule语法
// 引入vue.js
import Vue from './vue.js'
// 引入app组件模块
import App from './App.js'

new Vue({
    el: '#app',
    components: {
        App
    },
    template: `
        <App />
    `
});

App.js：

var app = {
    template:`
        <div>我是一个入口组件</div>
    `
};

// 导出app对象
export default app;

webpack.dev.config.js：

module.exports = {
    entry: {
        "main": "./main.js"
    },
    output: {
        filename: "./build.js"
    },
    watch: true
}

package.json：

{
  "name": "01_module",
  "version": "1.0.0",
  "description": "",
  "main": "vue.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack ./main.js ./build.js",
    "dev": "webpack --config webpack.dev.config.js",
    "pro": "webpack --config webpack.pro.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.12.0"
  }
}

1. 新建main.css文件：

body {
    background-color: green;
}

2. 在main.js中引入main.css：

// 引入css
import './main.css'

3. 终端执行npm run dev：

报错，缺少执行该类型文件的loader。

> 01_module@1.0.0 dev
> webpack --config webpack.dev.config.js


Webpack is watching the files…

Hash: 89e8bdef9f3c67250e54
Version: webpack 3.12.0
Time: 2007ms
     Asset    Size  Chunks                    Chunk Names
./build.js  363 kB       0  [emitted]  [big]  main
   [0] (webpack)/buildin/global.js 509 bytes {0} [built]
   [1] ./main.js 267 bytes {0} [built]
   [2] ./main.css 176 bytes {0} [built] [failed] [1 error]
   [3] ./vue.js 344 kB {0} [built]
   [7] ./App.js 126 bytes {0} [built]
    + 3 hidden modules

ERROR in ./main.css
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| body {
|     background-color: green;
| }
 @ ./main.js 2:0-19

4. 安装css-loader、style-loader：

npm i css-loader style-loader -D

安装完成，出现两个版本匹配警告：

peerDependencies WARNING css-loader@* requires a peer of webpack@^5.0.0 but webpack@3.12.0 was installed
peerDependencies WARNING style-loader@* requires a peer of webpack@^5.0.0 but webpack@3.12.0 was installed

暂时忽略警告，继续下面的配置。

5. 在webpack.dev.config.js文件中声明loader模块：

    // 声明模块 包含各个loader
    module: {
        loaders: [
            {
                // 以.css结尾的文件
                test: /\.css$/,
                // 优先执行css-loader，编译完成的css代码经过style-loader解析生成style标签，放到html页面的head标签内
                loader: 'style-loader!css-loader'
            }
        ]
    },

6. 终端再次执行npm run dev，报错：

ERROR in ./main.css
Module build failed: TypeError: this.getOptions is not a function
    at Object.loader (E:\vuekaike\04_css_loader\node_modules\_style-loader@3.2.1@style-loader\dist\index.js:19:24)
 @ ./main.js 2:0-19

原因：版本问题，需要降低版本。

卸载css-loader、style-loader：

npm uninstall css-loader style-loader -D

从npmjs官网上查找与当前安装的webpack版本对应的loader版本号：

npmhttps://www.npmjs.com/

重新安装：

cnpm install css-loader@0.28.11 -D
cnpm install style-loader@0.23.1  -D

安装成功，终端再次执行npm run dev，编译成功：

在浏览器中打开index.html，可以看到设置的body颜色生效，css解析成功：

每一天，每一步

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
webpack中css-loader、style-loader的使用

项目目录结构如下：各文件源码如下：index.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></h.
复制链接

扫一扫

专栏目录