import{_ as s,c as n,o as a,a as l}from"./app.2b769fcb.js";const A=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-sass-\u5168\u5C40\u6837\u5F0F"}],"relativePath":"guide/vue2/sass.md","lastUpdated":1661153879000}'),p={name:"guide/vue2/sass.md"},o=l(`

\u2705 Sass \u5168\u5C40\u6837\u5F0F

\u9996\u5148 \u4F60\u53EF\u80FD\u4F1A\u9047\u5230 node-sass \u5B89\u88C5\u4E0D\u6210\u529F\uFF0C\u522B\u653E\u5F03\u591A\u8BD5\u51E0\u6B21\uFF01\uFF01\uFF01

\u6BCF\u4E2A\u9875\u9762\u81EA\u5DF1\u5BF9\u5E94\u7684\u6837\u5F0F\u90FD\u5199\u5728\u81EA\u5DF1\u7684 .vue \u6587\u4EF6\u4E4B\u4E2D scoped \u5B83\u987E\u540D\u601D\u4E49\u7ED9 css \u52A0\u4E86\u4E00\u4E2A\u57DF\u7684\u6982\u5FF5\u3002

html
<style lang="scss">
    /* global styles */
</style>

<style lang="scss" scoped>
    /* local styles */
</style>

\u76EE\u5F55\u7ED3\u6784

vue-h5-template \u6240\u6709\u5168\u5C40\u6837\u5F0F\u90FD\u5728 @/src/assets/css \u76EE\u5F55\u4E0B\u8BBE\u7F6E

bash
\u251C\u2500\u2500 assets
\u2502   \u251C\u2500\u2500 css
\u2502   \u2502   \u251C\u2500\u2500 index.scss               # \u5168\u5C40\u901A\u7528\u6837\u5F0F
\u2502   \u2502   \u251C\u2500\u2500 mixin.scss               # \u5168\u5C40mixin
\u2502   \u2502   \u2514\u2500\u2500 variables.scss           # \u5168\u5C40\u53D8\u91CF

\u81EA\u5B9A\u4E49 vant-ui \u6837\u5F0F

\u73B0\u5728\u6211\u4EEC\u6765\u8BF4\u8BF4\u600E\u4E48\u91CD\u5199 vant-ui \u6837\u5F0F\u3002\u7531\u4E8E vant-ui \u7684\u6837\u5F0F\u6211\u4EEC\u662F\u5728\u5168\u5C40\u5F15\u5165\u7684\uFF0C\u6240\u4EE5\u4F60\u60F3\u5728\u67D0\u4E2A\u9875\u9762\u91CC\u9762\u8986\u76D6\u5B83\u7684\u6837\u5F0F\u5C31\u4E0D\u80FD\u52A0 scoped\uFF0C\u4F46\u4F60\u53C8\u60F3\u53EA\u8986\u76D6\u8FD9\u4E2A\u9875\u9762\u7684 vant \u6837\u5F0F\uFF0C\u4F60\u5C31\u53EF\u5728\u5B83\u7684\u7236\u7EA7\u52A0\u4E00\u4E2A class\uFF0C\u7528\u547D\u540D\u7A7A\u95F4\u6765\u89E3\u51B3\u95EE\u9898\u3002

css
.about-container {
    /* \u4F60\u7684\u547D\u540D\u7A7A\u95F4 */
    .van-button {
        /* vant-ui \u5143\u7D20*/
        margin-right: 0px;
    }
}

\u7236\u7EC4\u4EF6\u6539\u53D8\u5B50\u7EC4\u4EF6\u6837\u5F0F \u6DF1\u5EA6\u9009\u62E9\u5668

\u5F53\u4F60\u5B50\u7EC4\u4EF6\u4F7F\u7528\u4E86 scoped \u4F46\u5728\u7236\u7EC4\u4EF6\u53C8\u60F3\u4FEE\u6539\u5B50\u7EC4\u4EF6\u7684\u6837\u5F0F\u53EF\u4EE5 \u901A\u8FC7 >>> \u6765\u5B9E\u73B0\uFF1A

css
<style scoped>
.a >>> .b { /* ... */ }
</style>

\u5168\u5C40\u53D8\u91CF

vue.config.js \u914D\u7F6E\u4F7F\u7528 css.loaderOptions \u9009\u9879,\u6CE8\u5165 sass \u7684 mixin variables \u5230\u5168\u5C40\uFF0C\u4E0D\u9700\u8981\u624B\u52A8\u5F15\u5165 ,\u914D\u7F6E$cdn\u901A\u8FC7\u53D8\u91CF\u5F62\u5F0F\u5F15\u5165 cdn \u5730\u5740,\u8FD9\u6837\u5411\u6240\u6709 Sass/Less \u6837\u5F0F\u4F20\u5165\u5171\u4EAB\u7684\u5168\u5C40\u53D8\u91CF\uFF1A

javascript
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
const defaultSettings = require('./src/config/index.js')
module.exports = {
    css: {
        extract: IS_PROD,
        sourceMap: false,
        loaderOptions: {
            // \u7ED9 scss-loader \u4F20\u9012\u9009\u9879
            scss: {
                // \u6CE8\u5165 \`sass\` \u7684 \`mixin\` \`variables\` \u5230\u5168\u5C40, $cdn\u53EF\u4EE5\u914D\u7F6E\u56FE\u7247cdn
                // \u8BE6\u60C5: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
                prependData: \`
                @import "assets/css/mixin.scss";
                @import "assets/css/variables.scss";
                $cdn: "\${defaultSettings.$cdn}";
                 \`,
            },
        },
    },
}

\u8BBE\u7F6E js \u4E2D\u53EF\u4EE5\u8BBF\u95EE $cdn,.vue \u6587\u4EF6\u4E2D\u4F7F\u7528this.$cdn\u8BBF\u95EE

javascript
// \u5F15\u5165\u5168\u5C40\u6837\u5F0F
import '@/assets/css/index.scss'

// \u8BBE\u7F6E js\u4E2D\u53EF\u4EE5\u8BBF\u95EE $cdn
// \u5F15\u5165cdn
import { $cdn } from '@/config'
Vue.prototype.$cdn = $cdn

\u5728 css \u548C js \u4F7F\u7528

html
<script>
    console.log(this.$cdn)
</script>
<style lang="scss" scoped>
    .logo {
        width: 120px;
        height: 120px;
        background: url($cdn+'/weapp/logo.png') center / contain no-repeat;
    }
</style>
`,20),e=[o];function c(t,r,D,y,F,C){return a(),n("div",null,e)}const d=s(p,[["render",c]]);export{A as __pageData,d as default};