在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 怎么配置webpack，在<style>中才能使用`@import`

怎么配置webpack，在<style>中才能使用`@import`?

在遵循這篇博文的時(shí)候：http://blog.csdn.net/xiejunna...

代碼為：

<template>
  <div id="app" > </div>
</template>
<script src="/static/js/easydialog.min.js" ></script>
<script>
export default {
  name: 'MainPage',
  data () {
    return {
    }
  }
<style scoped>
  @import '/static/css/easydialog.min.css';  // 因?yàn)檫@樣引入，我的console會(huì)打印錯(cuò)誤
</style>

請(qǐng)問(wèn)下需要怎么配置webpack嗎？

回答
編輯回答
萌面人

用less

在vue文件中：
<style lang="less" scoped>
@import "~less-plugin-est/src/all.less";
</style>

需要的install 的第三方庫(kù)：less, less-loader, extract-text-webpack-plugin

webpack.config.js文件的rules中加入：

  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        css: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: process.env.NODE_ENV === 'production',
                sourceMap: process.env.NODE_ENV !== 'production',
              },
            }],
          fallback: {
            loader: 'vue-style-loader',
            options: {
              sourceMap: process.env.NODE_ENV !== 'production',
            },
          },
        }),
        less: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: process.env.NODE_ENV === 'production',
                sourceMap: process.env.NODE_ENV !== 'production',
              },
            },
            {
              loader: 'less-loader',
              options: {
                sourceMap: process.env.NODE_ENV !== 'production',
                plugins: [],
              },
            }],
          fallback: {
            loader: 'vue-style-loader',
            options: {
              sourceMap: process.env.NODE_ENV !== 'production',
            },
          },
        }),
      },
    },
  },
2017年9月13日 20:36