scss的使用想必大家都知道,就不多说了
vue-cli3中sass的使用与配置
scss for vue-cli3脚手架 需要安装node-sass / sass-loader
三种引用方式:
-
引入: <style lang=“scss” 使用: <xx class=“box”
-
引入: <style lang=“scss” module 使用: <xx class={$style.box}
-
引入: <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”]
}
-
引入: <style lang=“scss” 使用: <xx class=“box”
-
引入: <style lang=“scss” module 使用: <xx class={$style.box}
-
引入: <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’)
//注意自己的路径
}
}
)
结束!!!