vue-cli 中 sass-loader的使用

为我们配置全局的sass变量,方便我们使用 sass-loader实现

安装 yarn sass-loader(用vue-cli配置的时候已经安装好sass-loader)

vue.config.js 配置(参考vue cli官网的配置参考)

https://cli.vuejs.org/zh/guide/css.html#css-modules

向预处理器 Loader 传递选项
webpack.config.js

module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: '@import "./src/assets/style/main.scss";'
        // data: `@import "./src/lib/hotcss/px2rem.scss";`  全局导入main.scss文件
      }
    }
  },
  }
  // configureWebpack: config => {
  //   config.externals = {
  //     vue: 'Vue',
  //     'vue-router': 'VueRouter',
  //     lodash: {
  //       commonjs: 'lodash',
  //       umd: 'lodash',
  //       root: '_'
  //     }
  //   };
  // }
};

修改完配置文件重启服务 配置生效