vueのsassを使用したcssプリロードの設定に基づいて

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

1. Sass依存パッケージをインストールする


npm install -save-dev sass-loader

//sass-loader依赖于node-sass
npm install -save-dev node-sass

2.下の赤い部分に示すように、ビルドフォルダの下のwebpack.base.conf.jsのルールに設定を追加します。


{ 
test: /\.sass$/, 
loaders: ['style', 'css', 'sass'] 
} 

<span style="color:#454545;">// module用来解析不同的模块
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
// 也就是说,对.js和.vue文件在编译之前进行检测,检查有没有语法错误'eslint-loader'
// enforce: 'pre'选项可以确保,eslint插件能够在编译之前检测,如果不添加此项,就要把这个配置项放到末尾,确保第一个执行
// 对vue文件使用vue-loader,该loader是vue单文件组件的实现核心,专门用来解析.vue文件的
loader: 'vue-loader',
// 将vueLoaderConfig当做参数传递给vue-loader,就可以解析文件中的css相关文件
options: vueLoaderConfig
},
{
test: /\.js$/,
// 对js文件使用babel-loader转码,该插件是用来解析es6等代码
loader: 'babel-loader',
// 指明src和test目录下的js文件要使用该loader
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
// 对图片相关的文件使用 url-loader 插件,这个插件的作用是将一个足够小的文件生成一个64位的DataURL
// 可能有些老铁还不知道 DataURL 是啥,当一个图片足够小,为了避免单独请求可以把图片的二进制代码变成64位的
// DataURL,使用src加载,也就是把图片当成一串代码,避免请求,神不神奇??
loader: 'url-loader',
options: {
// 限制 10000 个字节一下的图片才使用DataURL
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
// 字体文件处理,和上面一样
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
</span><span style="color:#ff0000;">{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}</span><span style="color:#454545;">
]
},</span>

3.テンプレートのスタイルlang = "scss"を変更します(たとえば、テンプレートの赤いマーク


<style lang="scss">

<template>
<div id="indexContent">
<v-header></v-header>
<div class="tab">
<div class="tab-item">
<!- 使用 router-link 组件来导航. ->
<!- 通过传入 `to` 属性指定链接. ->
<!- <router-link> 默认会被渲染成一个 `<a>` 标签 ->
<router-link to="/foods">商品</router-link>
</div>
<div class="tab-item">
<router-link to="/rating">评论</router-link>
</div>
<div class="tab-item">
<router-link to="/seller">商家</router-link>
</div>
</div>
<!- 路由出口 ->
<!- 路由匹配到的组件将渲染在这里 ->
<router-view></router-view>
</div>
</template>
<script type="text/ecmascript-6">
import header from './components/header/header.vue';
// 加default表示对整个模块进行导出
export default{
components: {
'v-header': header
}
};
</script>
<span style="color:#cc0000;"><style lang="scss"></span>
#indexContent {
.tab{
display: flex;
width:100%;
height: 40px;
line-height: 40px;
.tab-item {
flex: 1;
text-align: center;
a{
display:block;
}
}
}
}
</style>

4.npm devを実行する

5.効果

上記のcesの設定に基づいてcssの事前ローディングに基づいて、すべての人と共有する小さなシリーズです、私はあなたに参考にしたい、私はあなたがスクリプトハウスをサポートできることを願っています。


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ