首页 > Web开发 > 详细

react&webpack使用css、less && 安装原则 --- 从根本上解决问题。

时间:2017-07-24 23:23:50      阅读:450      评论:0      收藏:0      [点我收藏+]

  在webpack-react项目中,css的使用对于不同人有不同的选择,早起是推荐在jsx文件中使用 css inline js的,但是这种方法要写很多对象来表示一个一个的标签,并且对于这些对象,我们在写样式时,还必须要使用驼峰式的写法,所以,这无疑使我们不能接受的,最好的做法就是讲css文件写在一个单独的文件夹中外联进来。 

  webpack同时也是可以将css文件当做一个一个的模块的,所以,我们就需要对css模块的处理进行配置。 

  npm install css-loader style-loader --save-dev 

  其中的css-loader作用是使得webpack寻找css文件,style-loader的作用是为了使得css嵌入到html中。 

  webpack.config.js配置如下所示:

  

{
test: /\.css$/,
loader: style-loader!css-loader
}

  

  接着我们就可以使用require()的方式引入css文件了。 

 

 

 

  

 

  

  如果我们希望使用less,那么我们就可以使用less-loader来处理了。 最终的代码如下:

module.exports = {
    entry: ["./index.js"],
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    watch: true,
    module: {
        loaders: [
        {
            test: /\.jsx?$/,
            loader: babel-loader,
            exclude: /node_modules/,
            query: {
                presets: [es2015, react]
            }
        },
        {
            test: /\.css$/,
            loader: style-loader!css-loader
        },
        {
            test: /\.less$/,
            use: [{
                 loader: "style-loader" // creates style nodes from JS strings
             }, {
                 loader: "css-loader" // translates CSS into CommonJS
             }, {
                 loader: "less-loader" // compiles Less to CSS
             }]
        }
        ]
    }
}

  

  之前我在网上搜了很多的博客,每个人的说法似乎都不一致,并且都是只有自己才可以理解的,所以,在安装less这一步上我就浪费了不少的时间,而这次的效率之低让我意识到了这样的问题:

  在寻找解决方案时,应该从源头上去寻找,比如: 

  这里的解决方案是从: https://doc.webpack-china.org/loaders/less-loader/ 这个网站上找到的,这里正是官方文档,是根源,他人写的所有的博客,其实最终也都是基于此而出现的

 

 

 

 

react&webpack使用css、less && 安装原则 --- 从根本上解决问题。

原文:http://www.cnblogs.com/zhuzhenwei918/p/7231418.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!