vue-cli配置sass以及使用

1. 安裝依賴
npm install node-sass --save-dev
npm install sass-loader --save-dev

2.修改:webpack.base.config.js  (在loaders裏面加入如下代碼)
{
  test: /\.scss$/,
  loaders: ["style", "css", "sass"]
}

3.全局使用依賴
npm install sass-resources-loader --save-dev

4.修改:build/utils.js
scss: generateLoaders('sass')
修改成:
scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      //你本身的scss全局文件的路徑
      resources: path.resolve(__dirname, '../src/common/scss/index.scss')
    }
  }
)

5.index.scss 示例
//重置樣式
@import './reset.scss';
//minxin
@import './mixin.scss';
//全局基本樣式
@import './base.scss';

6.使用示例
<style lang="scss" type="text/css">
h1 { color: $color }
</style>
相關文章
相關標籤/搜索