use: ExtractTextPlugin.extract({fallback: style-loader
在迁移 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