手に書いている項目にテーマ色があり、多くの場所で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
}