scss下载方式与引入方式
下载方式
下载sass指令
gem install sass
gem install compass
或者
npm install sass-loader --save-dev
npm install node-sass --save-dev
注:正式使用sass需要一定的webpack基础，建议新手先去看看webpack的使用
此处是原生webpack使用方式，rules的loader一定注意是sass而使用的时候是test:/.scss$/这俩区别个人认为sass更加激进去掉了{}改为缩进所以大多数人是使用的是.scss
module.exports = {
开发环境
mode: 'development',
解决问题
resolve:{
vue入口文件
alias:{
以vue结尾
'vue$': 'vue/dist/vue.js'
},
默认扩展名
extensions:['.js']
},
入口文件
entry: {
'00':'./modules/00.js',
'01':'./modules/01.js',
'02':'./modules/02.js',
'03':'./modules/03.js',
'04':'./modules/04.js',
'05':'./modules/05.js',
'06':'./modules/06.js',
},
发布文件
output: {
filename: '[name].js'
},
模块
module: {
rules:[
{
test:/\.css$/,
loader:'style-loader!css-loader'
},
{
test:/\.scss$/,
loader:'style-loader!css-loader!sass-loader'
}
]
}
}
vue中如果您使用的是cli脚手架那么在创建初期系统会询问你是否使用sass勾选后，可以直接在style标签里面加入lang="scss"就能使用了
没有使用脚手架的话，vue使用需要完成三部分
1、下载sass
npm install sass-loader --save-dev
npm install node-sass --save-dev
2、在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
3、在style标签里面加入lang=“scss”