vue-loader 配置了css加载器属性。

  module: {
    loaders: [     // 这里也是相应的配置,test就是匹配文件,loader是加载器,
        {
            test: /\.vue$/,
            loader: ‘vue‘
        },
        {
            test: /\.js$/,
            loader: ‘babel‘,
            include: projectRoot,
            exclude: /node_modules/
        },
        {
            test: /\.json$/,
            loader: ‘json‘
        },
       /* {
            test: /\.css$/,   //这是注释掉的模块,一开始很疑惑加入css的编译模块马上就报错了,注释掉之后sass代码照样可以成功编译。
            loader: ["vue-style-loader", "css-loader"]
        },
        {
            test: /\.less$/,
            loader: ["vue-style-loader", "css-loader", "less-loader"]
        },
        {
            test: /\.(scss|sass)$/,
            loader: ["node-sass", "vue-style-loader", "css-loader", "sass-loader"]
        },
        {
            test: /\.scss/,
            loaders: [‘css‘, ‘autoprefixer‘, ‘sass‘],
        },*/
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: ‘url‘,
            query: {
              limit: 10000,
              name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘)
            }
        },
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: ‘url‘,
            query: {
              limit: 10000,
              name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]‘)
            }
        }
    ]
  },
// vue-loader 配置
  vue: {   //后面才清楚是// vue-loader 中已经配置了
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),  //加载css配置模块
 // Autoprefixer是一个基于PostCSS的智能添加CSS前缀的插件
    postcss: [
      require(‘autoprefixer‘)({
        browsers: [‘last 2 versions‘]  //意思是只对主流浏览器的最新两个版本(其实也就是不做兼容了,现代最新的浏览器基本都不需要兼容了呀)
      })
    ]
  }
}

  

  1. 配置静态资源路径
  2. 生成cssLoaders用于加载.vue文件中的样式
  3. 生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件

vue-loader则只配置了css加载器以及编译css之后自动添加前缀。(所以才可以直接编译.vue文件里面的sass样式)

时间: 2024-12-15 05:39:33

vue-loader 配置了css加载器属性。的相关文章

webpack.config.js====CSS相关:::css加载器

1. 安装: //loader加载器加载css和sass模块 cnpm install style-loader css-loader node-sass sass-loader --save-dev //loader加载器加载css和less模块 cnpm install style-loader css-loader less less-loader --save-dev //样式抽离文件 如果是webpack4.X 需要加@next //现在webpack4.x支持mini-css-ext

webpack.config.js====CSS相关:::postcss-loader加载器,自动添加前缀

1. 安装:复制拷贝文件 cnpm install postcss-loader autoprefixer --save-dev 2. webpack.config.js中使用 rules: [ //配置css加载器 { test: /\.css$/, use: cssExtract.extract({ fallback: "style-loader", use: ["css-loader", "postcss-loader"] }) }, //

Spin.js-CSS动画进度加载器

spin.js是一款非常简单的CSS加载器,他是一款使用了VML(Vector Makeup Language)的CSS动画效果. spin.js的特性 他有着非常强大的适应性,有着以下几个特性: 1.    没有额外的图片,也没有增加的外部CSS文件 2.    不需要依赖于其他工具,对于jQuery而言,它支持jQuery,但是jQuery并非必须的 3.    有很高的可配置性 4.    与分辨率无关 5.    浏览器兼容性很好,在低版本的IE上,采用VML支持 6.    使用了@k

007-spring cloud gateway-GatewayAutoConfiguration核心配置-RouteDefinition初始化加载

一.RouteDefinitionLocator 在Spring-Cloud-Gateway的GatewayAutoConfiguration初始化加载中会加载RouteDefinitionLocator(路由定义信息加载器)信息. //初始化配置路由定义加载器 @Bean @ConditionalOnMissingBean public PropertiesRouteDefinitionLocator propertiesRouteDefinitionLocator(GatewayProper

webpack loader加载器

配置loader,通过加载器处理文件,例如css sass less等,告诉webpack每一种文件都需要使用什么来加载器来处理. 1.node.js安装好之后也会自动默认安装好npm,所以cmd cd进入当前项目下输入npm install babel-loader babel babel-core css-loader style-loader url-loader file-loader less-loader less --save-dev命令下载这些包. 2.修改webpack.con

CI框架 -- 核心文件 之 Loader.php(加载器)

顾名思义,装载器就是加载元素的,使用CI时,经常加载的有: 加载类库文件:$this->load->library() 加载视图文件:$this->load->view() 加载模型文件:$this->load->model() 加载数据库文件:$this->load->database() 加载帮助文件:$this->load->helper() 加载配置文件:$this->load->config() 加载包路径:$this-&g

Webpack的加载器

一.什么是加载器(loaders) loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webpack去加载less文件.sass文件.es的js文件等 二.loaders 特性 loaders可以串联,他们应用于管道资源,最后的loader将返回javascript,其它的可返回任意格式(传递给下一个loader) loaders 可以同步也可以异步 loaders在no

8 loader - 配置处理css样式表的第三方loader

// 使用import语法,导入css样式表 import './css/index.css' // 注意:webpack,默认只能打包处理JS类型的文件,无法处理其它的非JS类型的文件: // 如果要处理非JS类型的文件,我们需要手动安装一些 合适 第三方loader加载器: // 1.如果想要打包处理css文件,需要安装 cnpm i style-loader css-loader -D // 2.打开webpack.config.js这个配置文件,在里面,新增一个配置节点,叫做module

webpack中的加载器

通过loader打包非js模块 在实际开发过程中,webpack 默认只能打包处理以.js 后缀名结尾的模块,其他非.js 后缀名结 尾的模块,webpack默认处理不,需要调用loader加载器才可以正常打包,否则会报错! loader加载器可以协助webpack打包处理特定的文件模块,比如: less-loader可以打包处理 .less相关的文件 sass-loader可以打包处理 .scss相关的文件 url-loader可以打包处理css中与url路径相关的文件 loader的调用过程