vue-cli 里面建立的.vue文件的style部分 引用根目录怎么整？

Posted 2023-04-16

就是比如用了less 我写了一个
@import '../../common/less/mixin.less';
有没有什么办法 能像JS部分一样 直接从 src开始
import header from '@/components/header/header';
就是上面这样 写了一个 @直接代表从src开始 ？ 就是不用写那么多../直接从src目录开始
查了下webpack.base.conf.js
resolve:
extensions: ['.js', '.vue', '.json','css','less'],
alias:
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')

,
我添加了css 和 less 依然没效果 怎么整？

首先，在写Vue的时候，应该采用懒加载模式，之后生成的包，就会被打入到不同分组的js，运行时按需加载，详情见：Vue-路由懒加载；这个意义重大！其次，可利用，webpack.DllReferencePluginwebpack.DllReferencePlugin将常用不怎么变更的文件，打入一个统一的文件，外链使用。这个主要作用也可用来缩小包构建的时间；这个网上教程蛮多，就不赘述。也可参见这个项目jade-blog来配置；这一步即是你通过配置将部分库抽离出来，打包成另外的文件。再次，可以利用webpack-bundle-analyzer可以分析打包后生成的文件结构，十分牛掰（最新Vue-cli带有此配置）；在package.json中配置如下命令npmrunanalyz，运行即可查看之："analyz":"NODE_ENV=productionnpm_config_report=truenpmrunbuild" 参考技术A scss 是可以这样写的 @import '~@/assets/mixin.scss' 参考技术B 我也帮不了你了哈哈本回答被提问者采纳

vue2.0 vue-cli+webpack使用less和sass的说明

config 目录下好像都不需要相关配置,但是package.json里面

下面的依赖必须有

"css-loader": "^0.28.11",

"less": "^3.0.4",
"less-loader": "^4.1.0",

"style-loader": "^0.21.0",

"vue-style-loader": "^3.0.1",

 

 

使用

<style lang="less">

 

 

还有一种使用sass

config.base.js

{
test: /\.sass$/,
loaders: [‘style‘, ‘css‘, ‘sass‘]
},

css-loader,vue-style-loader,

"sass-loader": "^6.0.7",

 

使用<style lang="sass">