在写 vue 的 CSS 样式时,觉得需要 css 预处理器让自己的 css 更加简洁、适应性更强、可读性更佳,更易于代码的维护,于是在 vue-cli 脚手架采用 scss。写过的人都知道,每写一个. vue 文件都要在 style 上面 @import global.scss 文件的话,这样很麻烦。css 文件可以在 main.js 中可以直接 import,而 scss 文件 import 会报错,因此记录下处理的方法。
步骤一: 安装 node-sass、sass-loader、style-loader
- cnpm install node-sass --save-dev
- cnpm install sass-loader --save-dev
- cnpm install style-loader --save-dev
步骤二: 安装 sass-resources-loader
- cnpm install sass - resources - loader--save - dev
步骤三: 修改 build 中的 utils.js
- scss: generateLoaders('sass')
- 修改成:
- scss: generateLoaders('sass').concat(
- {
- loader: 'sass-resources-loader',
- options: {
- resources: path.resolve(__dirname, '../src/assets/global.scss')
- }
- }
- )
可知,我是在 assets 中创建了一个 global.scss 文件。
最后,在组件中的 style 标签添加 lang="scss",就 OK 了。
附上 scss 基础教程: https://www.sass.hk/guide/
来源: http://www.bubuko.com/infodetail-2435488.html