在vue里面使用sass

首先使用vue-cli搭建整个项目以后,全局安装

npm i

运行成功以后,再安装sass

//sass-loader是依赖node-loader
npm i sass-loader node-sass -D

然后在build/webpack.base.conf.js的rules里面添加配置项:

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

配置项

在各个组件里面使用:

<style lang="scss">
      <!-- lang的属性值是scss不是sass -->
</style>

• 以上我们是可以在各个组件中使用scss了,那么如果我有一个全局的样式我不想每一个组件里面都定义,只想在公共的publice.scss里面定义然后全局可用我们可以做如下配置

1. 安装style-loader

npm install style-loader --save-dev  

1. 安装sass-resources-loader

cnpm install sass-resources-loader --save-dev

1. 修改build中的utils.js的相关配置

将
scss: generateLoaders('sass')
修改成:
    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/scss/publice.scss')
        }
      }
    )

以上文件的相对路径和文件名可以根据自己的项目结构来做相应修改