css|vue中使用scss
步骤一：
安装依赖包
npm install node-sass --save-dev
npm install sass-loader --save-dev步骤二：
配置
在build中的 webpack.base.conf.js 文件中，找到rules，添加
// 在 rules中添加
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}步骤三：
添加一个公共文件，在所有的vue文件中都可以使用
安装
npm install style-loader --save-dev
npm install sass-resources-loader --save-dev配置
找到build文件夹下的utils.js文件，在位置
scss: generateLoaders('sass')修改为一下内容// scss: generateLoaders('sass')
// 改为：
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
// 此处为公共的scss
resources: path.resolve(__dirname, '../src/assets/scss/_common.scss')
}
}
),需要在src/assets下新建scss文件夹，添加一个公共文件_common.scss。当然，你也可以自己命名，或者在别的位置新建
设置全局scss后，无需在style中引入，即可使用
_common.scss中的变量等步骤四：
使用
// 引入scss下的 test.scss 文件
@import './scss/test.scss';
// 引入scss下的 _test.scss 文件
@import './scss/test';
【css|vue中使用scss】
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 异地恋中，逐渐适应一个人到底意味着什么（）
- vue-cli|vue-cli 3.x vue.config.js 配置
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷（Invasion篇）发售
- “成长”读书社群招募