vue sassグローバル変数の構成


  • 手に書いている項目にテーマ色があり、多くの場所でcolor:#fff、background-color:#fffと書くのが面倒だと感じました.プロジェクトで1つのsassのグローバル変数を使用したい場合、後期にテーマ色を変更するには1つの変数だけを変更すればよいが、**main.jsにこの変数を含むscssファイルを直接importで導入した後、グローバルに使用することはできず、ページにUndefind variableと報告される.
  • 1.npm install sass-resources-loader --save
  • を先に取り付ける必要がある.
  • 2.それから資料を参考にして後発するにはvue-config.jsの中で公式サイトに従って配置する必要があります**https://cli.vuejs.org/zh/guide/css.html#css-modules、しかし配置の後でずっと間違いを報告して、それから配置の中のdataの属性をprependDataの属性に変えてすむので、参考にしますhttps://segmentfault.com/a/1190000020392688?utm_source=tag-newest.vue-config.jsにおけるcss構成sassのコードは以下の
  • である.
  • //CSS関連オプションcss:{
     //       CSS          CSS    (        )
     //           `extract-text-webpack-plugin`      
     //     css     ExtractTextPlugin       true,      false
     //extract: false,
    
     //      CSS source map?
     sourceMap: false,
     
     loaderOptions: {
         sass: {
             prependData: `@import "@/styles/common.scss";`
         }
     },
     //      CSS           CSS Modules。
     //          `*.vue`   。
     modules: false
    
    }