2019-10-08

webpack

[2019-10-11]conda 和 jupyter-notebook 操作记录
[2019-10-08]Webpack sass 相对路径问题

[2019-10-11]conda 和 jupyter-notebook 操作记录

# conda 版本4.7.10
# 查看所有环境
conda env list

# 新建环境并指定python版本
# 其中 -n python2.7 是给这个环境命名为python2.7, 后面的 python=2.7 是指定python的版本, 不用指定2.7.x
# conda会自动帮我们安2.7下最高的版本
conda create -n python2.7 python=2.7

# 切换环境
conda activate python2.7

# 搜索python库
conda search numpy

# 安装python库
conda install numpy

conda install numpy=1.17.2 # 指定版本

conda install -n python2.7 numpy=1.17.2 # 安装到指定环境

# 安装ipython python2内核 https://ipython.readthedocs.io/en/latest/install/kernel_install.html
# 记得先升级一下pip
python2 -m pip install ipykernel
python2 -m ipykernel install --user

# 启动jupyter-notebook, 并把py转化成ipynb文件
%load file.py # 后执行即可

[2019-10-08]Webpack sass 相对路径问题

使用Webpack构建时, sass模块中使用相对路径引用了其他资源时, 可能发生如下错误

|- proj
  |- scss
    |- index.scss
    |- image.png
  |- page
    |- index.vue

/* index.scss */
.bg {
  background: url(./image.png);
}

// index.vue
<style lang="scss">
@import '../scss/index.scss';
</style>

按上面的目录结构运行开发构建时, 会报错

ModuleNotFoundError: Module not found: Error: Can't resolve './image.png' in '/proj/page'

可以看出资源的相对路径不是根据被引用scss模块的路径进行计算, 而是根据引用scss模块的模块的路径进行计算的

有两个解决方案可以避免这个问题

1是可以在js/js代码块中引用scss模块, webpack会帮我们找到正确的图片路径

<!-- index.vue -->
<script>
import '../scss/index.scss';
// ...
</script>

2是可以使用webpack的resolve.alias设置路径别名, 然后在引用模块时都使用绝对路径别名(绝对路径)进行引用

// vue.config.js
config.resolve.alias.set('@', 'path/to/proj/');

/* index.scss */
.bg {
  background: url(~@/scss/image.png);
}

// index.vue
<style lang="scss">
@import '~@/scss/index.scss';
</style>