ホームページ > 記事 > ウェブフロントエンド > vueでのcssプリロードをベースにしたsassを使った設定方法を詳しく解説
以下に、vue での css プリロードをベースにした sass を使用した設定方法を詳しく説明します。非常に参考になるので、皆さんの参考になれば幸いです。
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">
)。
商品
评论
商家 <style lang="scss"> #indexContent { .tab{ display: flex; width:100%; height: 40px; line-height: 40px; .tab-item { flex: 1; text-align: center; a{ display:block; } } } }
4.npm run dev
5. Effect
上記は、将来皆さんのお役に立てれば幸いです。
関連記事:
JSでEL式を使うコンテキストパラメータ値を取得するメソッド
以上がvueでのcssプリロードをベースにしたsassを使った設定方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。