vue-cli 中 sass-loader的使用

為我們配置全局的sass變量,方便我們使用 sass-loader實(shí)現(xiàn)

安裝 yarn sass-loader(用vue-cli配置的時(shí)候已經(jīng)安裝好sass-loader)

vue.config.js 配置(參考vue cli官網(wǎng)的配置參考)

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

向預(yù)處理器 Loader 傳遞選項(xiàng)
webpack.config.js

module.exports = {
  css: {
    loaderOptions: {
      // 給 sass-loader 傳遞選項(xiàng)
      sass: {
        // @/ 是 src/ 的別名
        // 所以這里假設(shè)你有 `src/variables.scss` 這個(gè)文件
        data: '@import "./src/assets/style/main.scss";'
        // data: `@import "./src/lib/hotcss/px2rem.scss";`  全局導(dǎo)入main.scss文件
      }
    }
  },
  }
  // configureWebpack: config => {
  //   config.externals = {
  //     vue: 'Vue',
  //     'vue-router': 'VueRouter',
  //     lodash: {
  //       commonjs: 'lodash',
  //       umd: 'lodash',
  //       root: '_'
  //     }
  //   };
  // }
};

修改完配置文件重啟服務(wù) 配置生效