如何在vue脚手架中使用sass

scss的使用想必大家都知道，就不多说了

vue-cli3中sass的使用与配置

	scss for vue-cli3脚手架 需要安装node-sass / sass-loader

三种引用方式：

1. 引入: <style lang=“scss” 使用: <xx class=“box”

2. 引入: <style lang=“scss” module 使用: <xx class={$style.box}

3. 引入: <style lang=“scss” scope 使用: <xx class=box

引入sass全局变量
在assets下定义文件： $theme-color: #300 > base.scss -> assets
配置webpack：
1） Vuevue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
data: @import "@/assets/css/base.scss";
}
}
}
}
2） node_modules/@vue/cli-service/lib/options.js
css: {
// extract: true,
// modules: false,
// localIdentName: ‘[name][local][hash:base64:5]’,
// sourceMap: false,
loaderOptions: {
sass: {
data: @import "@/assets/css/base.scss";
}
}
}

vue-cli2中sass的使用与配置

需要安装node-sass / sass-loader
配置: 在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /.scss$/,
loaders: [“style-loader”, “css-loader”, “sass-loader”]
}

1. 引入: <style lang=“scss” 使用: <xx class=“box”

2. 引入: <style lang=“scss” module 使用: <xx class={$style.box}

3. 引入: <style lang=“scss” scope 使用: <xx class=box

引入sass全局变量
在assets下定义文件： $theme-color: ‘#300’ > base.scss > assets

安装: sass-resources-loader
配置webpack： 在build/utils.js中修改配置

scss: generateLoaders(‘sass’).concat(
{
loader: ‘sass-resources-loader’,
options: {
resources: path.resolve(__dirname, ‘…/src/assets/scss/base.scss’)
//注意自己的路径
}
}
)

结束！！！