Vue.jsでScssをつかう

##Vue.jsでScssを使いたい
src/assets配下にscssフォルダを作成

common.scssの中身はこんな感じ

common.scss

// vender
@import "vender/normalize";

// foundation
@import "foundation/variables";
@import "foundation/functions";
@import "foundation/mixins";

// components
@import "object/_main";

_main.scss

p {
  color: blue;
}

下記コマンドでcssが生成される

npm run build

生成されたcssを読み込むには

プロジェクト配下にvue.config.jsを作成

vue.config.js

const isProduction = process.env.NODE_ENV === "production";
module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("eslint");
  },
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/assets/scss/common.scss";`
      }
    }
  },
  productionSourceMap: !isProduction
};

import-resolver.jsも設置

import-resolver.js

System.config({
  paths: {
    '@/*': 'src/*',
  },
});

確認する

css生成して

npm run build

立ち上げる

npm run serve

結果

反映されました