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: '_'
// }
// };
// }
};
修改完配置文件重启服务 配置生效