@import less样式文件 只有css样式生效， less样式却不生效

Question

使用webpack构建项目时 @import less文件时 为什么只有文件里面css样式生效， less样式却不生效

webpack.base.conf.js

    'use strict';
    const path = require('path');
    const prodConf = require('../config').build; 

    // 拼接路径
    function resolve(dir) {
        return path.join(__dirname, '..', dir)
    }

    // 资源路径
    function assetsPath(dir) {
        return path.join(prodConf.assetsPath, dir)
    }

    //webpack 基本设置
    module.exports = {
        //项目入口文件->webpack从此处开始构建！
        // entry: path.resolve(__dirname, '../src/main.js'),
        entry: {
            app: ['./src/main.js', 'babel-polyfill']
        },

        //配置模块如何被解析
        resolve: {
            //自动解析文件扩展名(补全文件后缀)(从左->右)
            // import hello from './hello'  （!hello.js? -> !hello.vue? -> !hello.json）
            extensions: [".js", ".vue", ".json"],

            //配置别名映射
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                'src': resolve('src'),
                'components': resolve('src/components'),
                'assets': resolve('src/assets'),
            }
        },

        //处理模块的规则(可在此处使用不同的loader来处理模块！)
        module: {
            rules: [
                {
                    test: /\.js$/, //资源路径
                    loader: 'babel-loader', //该路径执行的loader
                    // exclude: __dirname + '/node_modules/',  //指定哪个文件不需要loader
                    include: resolve("src") //指定哪个文件loader
                },
                {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                    include: resolve("src")
                },
                {//使用vue-style-loader!css-loader!postcss-loader处理以css结尾的文件！
                    test: /\.css$/,
                    use: [
                        'vue-style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true,
                                importLoaders: 1 //用于@import css
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: true
                            }
                        }
                    ],
                    include: resolve("src")
                },
                {//使用vue-style-loader!css-loader!less-loader!postcss-loader处理以css结尾的文件！
                    test: /\.less$/,
                    use: [
                        'vue-style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'less-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: true
                            }
                        }
                    ],
                    include: resolve("src")
                },
                {
                    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,  
                    loader: 'url-loader',
                    options: {
                        limit: 1000,
                        name: assetsPath("img/[name].[hash:8].[ext]")
                    }
                }
            ]
        }
    }

在main.js引入样式文件

    // 在main.js中引入, 这时直接引入less样式时是生效的
    import 'assets/css/index.less'



    //index.less

    @color: #fe4747;
    #app {  
        position: absolute;
        left:50%;top:50%;
        h1 {
            color: @color;
        }
    }

    h1 {
        font-size: 50px;
    }

但是 我在css文件里面 引入 less文件时， 却不生效了

    // 在main.js中引入
    import 'assets/css/style.css'



    // style.css

    @import 'index.less';
    html, body {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .1);
    }

这时less文件里面的样式就不生效了, 但是其中的css样式 却是生效的

还有在vue中引入less文件也是跟上面一样, 只有其中的css样式生效, less样式不生效, 而且都不报错

    <style lang="less">
        @import '../assets/css/home.less';
    </style>

请问这是什么原因？

Answer 1

css 引入less 语法是不起作用的 更何况你用js的import来引入
webpack 编译less 是按照文件名来的 你css引入了less 当然不编译
想要编译就把文件名改成.less