zoukankan      html  css  js  c++  java
  • 记一次 webpack.config.js 的 scss 加载问题的解决方案以及事情分析

    在迁移 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

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

  • 相关阅读:
    简单的REST的框架实现
    将 Shiro 作为一个许可为基础的应用程序 五:password加密/解密Spring应用
    Java自注三进入
    hdu 4803 贪心/思维题
    SSH框架总结(框架分析+环境搭建+实例源代码下载)
    Rational Rose 2007 &Rational Rose 2003 下载及破解方法和汉化文件下载
    hdu 5014 思维题/推理
    电脑蓝屏出现事件7000
    大豆生物柴油驱动的大巴斯(Bus)
    POJ 3481 & HDU 1908 Double Queue (map运用)
  • 原文地址:https://www.cnblogs.com/juwan/p/12274949.html
Copyright © 2011-2022 走看看