当前位置:首页 > Web开发 > 正文

use: ExtractTextPlugin.extract({fallback: style-loader

2024-03-31 Web开发

在迁移 vue-element-admin 到 electron-vue-serialport 的时候,发明了一次有趣的分析。

报错如下

ERROR in ./src/renderer/styles/variables.scss Module parse failed: Unexpected character '#' (2:6) You may need an appropriate loader to handle this file type. | // base color | $blue:#324157; | $light-blue:#3A71A8; | $red:#C03639; @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/renderer/views/layout/components/Sidebar/index.vue 7:0-49 @ ./src/renderer/views/layout/components/Sidebar/index.vue @ ./src/renderer/views/layout/components/index.js @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/renderer/views/layout/index.vue @ ./src/renderer/views/layout/index.vue @ ./src/renderer/router/index.js @ ./src/renderer/main.js

一开始没有细看,以为是公共常见问题,,但后来仔细分析了一下,它其实就是要你把 scss 文件添加到工程下。

那么怎么做呢?

搜索两边的工程发明 vue-element-admin 没有相关代码,然后看了一下 webpack.config.js 的加载情况,可以发明有如下配置

... { test: /\.(css)$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) }, ...

可以看到它并没有匹配 scss 的样式文件,那么我简单改削一下正则。

const ExtractTextPlugin = require('extract-text-webpack-plugin') ... { test: /\.(css|scss)$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) }, ...

but 掉败,看来不是这样操纵的。

于是搜索过程中注意到 scss 是有 sass-loader 的,所以改削成如下。

const ExtractTextPlugin = require('extract-text-webpack-plugin') ... { test: /\.(css)$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) }, { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) }, ...

于是解决,相关的配置细节看这个内容 https://www.cnblogs.com/songxia/p/10295830.html 。

重点不在于如何去改削,而是分析并解决问题的过程,如何解决问题才是我们需要学习的。

记一次 webpack.config.js 的 scss 加载问题的解决方案以及工作分析

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/30367.html