在使用 Webpack 构建的项目中配置 scss

Dependencies

• sass-loader

  加载 scss 文件并编译 scss 文件

• style-loader

  将 css 文件通过 style 标签插入页面

• css-loader

  处理css文件中的@import 和 url()

• node-sass

  将 sass 文件编译为 css 文件

• sass-rescources-loader

  用于在 webpack 中统一引入某些 sass 文件，less 可以使用 style-rescources-loader

cnpm install -D css-loader style-loader sass-loader node-sass sass-rescources-loader

Troubleshooting

全局引入某些经常使用的 scss 文件

​ 像mixin 和 variable 文件通常是在每个组件中都会用到的，每个组件使用的时候都需要手动的引入一遍，那么有没有一种方法能够只引入一次便可全局使用呢 ? 这就需要使用到 sass-rescources-loader。

​ 如果你使用vue-cli 搭建项目，那么可以在 build/utils.js 文件中进行如下修改：

scss: generateLoaders('sass').concat(
    {
        loader: 'sass-resources-loader',
        options: {
			resources: path.resolve(__dirname, '../src/assets/your.scss')  
			// 多个文件可写为数组
             //resources: [
             //	path.resolve(__dirname, '../src/style/variable.scss'), 
             //	path.resolve(__dirname, '../src/style/mixin.scss')
            ]
		}
	}
)

文件引入路径的问题

​ 在引入文件时，会存在文件路径过深的问题，就要写很长一段路径。我们可以通过在 webpack 中配置路径别名解决，例如使用 @ 符号代替 src 文件夹所在的路径，然后再引入组件时直接使用 @/components/index.vue。

​ 但是在 css 文件，如 less, sass, stylus 中，使用 @import “@/style/theme” 的语法引用相对 @ 的目录确会报错，”找不到 ‘@’ 目录”，说明 webpack 没有正确识别资源相对路径。

​ 这是由于css 文件会被用 css-loader 处理，这里 css @import 后的字符串会被 css-loader 视为绝对路径解析，因为我们并没有添加 css-loader 的 alias，所以会报找不到 @ 目录。

​ 解决办法：

​ 一、直接为 css-loader 添加 ailas 的路径，但是在 vue-webpack 给的模板中，单独针对这个插件添加配置就显得麻烦冗余了；
二、在引用路径的字符串最前面添加上 ~ 符号，如 @import “~@/style/theme”；Webpack 会将以 ~ 符号作为前缀的路径视作依赖模块而去解析，这样 @ 的 alias 配置就能生效了。