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中的变量等

步骤四：

使用

<style lang="scss" scoped>
// 引入scss下的 test.scss 文件
@import './scss/test.scss';

// 引入scss下的 _test.scss 文件
@import './scss/test';

</style>