如何使用Python webassets编译Bootstrap 4 SCSS？

我之前用webassets编译Bootstrap SCSS的时候也踩过类似的坑，咱们一步步来排查解决：

1. 先确保SCSS编译器已安装并配置正确 #

webassets的scss过滤器只是个包装，背后需要实际的SCSS编译器（比如Ruby版Sass或者Node.js的node-sass）。

• 如果用node-sass，先全局安装：

  npm install -g node-sass
  

• 然后在你的Python脚本里，要么确保编译器在系统PATH中，要么直接指定路径：

  my_env.config['SASS_BIN'] = 'node-sass'  # 全局安装的话直接写命令名，否则写绝对路径
  

2. 配置SCSS加载路径，解决内部依赖问题 #

Bootstrap的SCSS文件里有大量相对路径的@import（比如_variables.scss、_mixins.scss），你需要让SCSS编译器能找到这些文件。在创建Bundle的时候，一定要加上load_path参数，把当前目录（也就是bootstrap/scss）加入搜索路径：

css = Bundle(
    'main.scss',
    filters='scss',
    output='all.css',
    load_path=['.']  # 关键：告诉编译器从当前目录找依赖文件
)

3. 完整的可运行脚本示例 #

把你的脚本补全并修正后，应该是这样的：

from webassets import Bundle, Environment

# 初始化环境，当前目录就是bootstrap/scss
my_env = Environment(directory='.', url='/')

# 配置SCSS编译器（这里以node-sass为例，用Ruby Sass的话换成sass）
my_env.config['SASS_BIN'] = 'node-sass'

# 创建Bundle并指定加载路径
css = Bundle(
    'main.scss',
    filters='scss',
    output='all.css',
    load_path=['.']
)

# 注册并编译
my_env.register('bootstrap_css', css)
css.build()

4. 查看错误输出定位问题 #

运行脚本时一定要盯着控制台的错误信息：

• 如果提示command not found：说明编译器没安装或者路径配置错了
• 如果提示找不到某个_xxx.scss文件：说明load_path没设置对，编译器找不到Bootstrap的内部部分文件
• 如果提示变量未定义：大概率是Bootstrap的依赖文件没被正确引入，还是路径的问题

内容的提问来源于stack exchange，提问作者Ben Lindsay